Re: [css-d] Works great in IE7, not so much in FF/Safari
tmesa.mesadesignhouse wrote:
In IE7 (I haven't checked IE6 yet), the navigation centers vertically
perfectly. In FF (on PC and Mac) and Safari, the navigation is going
to the top of the box that is a background image. I can't for the
life of me figure out why.
IE6 and IE7 are cheating - the effect of 'hasLayout'[1], which means no
other browser - including IE8 - will follow their lead without some
proper styling.
To fix, add a new box formatting context[2] generating style, like...
div.list-menu {
float: left;
width: 100%;
}
...to keep the margin-top on div.list-menu ul from escaping
div.list-menu and join - collapsing[3] into - its margin-top.
I used that particular styling with 'float', to avoid problems with some
of the alternatives in even older IE/win versions.
Then I need to put the donation box (in its own div) in the
horizontal center of that 250px width of the nav box that wraps both
the list- menu div and the donation div, not flush left. Have a
feeling this may be a parent-child or ancestor thing that I can't
figure out. I can't get that to work on any of the browsers I've
checked today.
Not sure if I understand how you want that to appear visually, so here's
a partial and pretty rough example on how I would do it...
http://www.gunlaug.no/tos/alien/tm/test_08_0328.html
CSS:
http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc.css
Some cross-browser tuning still needed to make it appear the same
everywhere, I think, but the basic markup and CSS changes are there.
You need two - different - background-images for it to make it look
right. I just reused the single one you have in there, so the upper
corners show up for the lower one. You'll get the idea.
Note: make those background-images tall enough and allow the container
to stretch in height, to allow for some font-resizing. Fixed height
means it'll break under stress, so I've commented that height out for now.
I was able to validate the CSS and HTML on this. :-) You guys have me
trained.
Good - it helps :-)
http://mdh-test.com/ieresidential/index.shtml
http://mdh-test.com/ieresidential/ierc.css
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[3]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] (no subject)
Hi Theresa, This article should help: http://www.boutell.com/newfaq/creating/centervertically.html For browsers other than IE7, you should be able to set the display of the parent element (#nav) to 'display: table;', and then the display and vertical-align of the target element (div.list-menu)to 'display: table-cell; vertical-align: middle;'. You might then need a conditional comment in the head if this messes things up in IE7. William __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Funky RTL behaviour with 3-column layout
Hello All! After 4 days of agonizing over a 3-column layout, I'd like to ask you all for some assistance. My mandate is to add a customizable 3-column option for users to add to their site at their leasure. It was straighforward enough. After several quick tests, I determined that, for our needs, using ALA's holy grail seemed like a stable enough option. I really liked the cleanliness of the markup! Everything worked fine. But since our services are available in a variety of languages, I tested the layout in RTL format. All h*ll broke lose. When the window is resized to less than 680px, the left-hand content slides under the window and simply disappears. It's not even accessible by a scrollbar. You can view a very simple version here: http://goxsha.googlepages.com/bare-bones-column.htm If I remove the min-width property off the body element, I don't have this issue, but... you can imagine what it does to the poor layout! If anyone can provide some insight, or can point me to the right direction it would be SOOO much appreciated! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Funky RTL behaviour with 3-column layout
Sharon Go wrote: It was straighforward enough. After several quick tests, I determined that, for our needs, using ALA's holy grail seemed like a stable enough option. http://goxsha.googlepages.com/bare-bones-column.htm The ALA holy grail is known to be problematic. It is flaky at best. This is a stable, robust 3 column layout that will work extremely cross-browser: http://www.alistapart.com/articles/negativemargins -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Funky RTL behaviour with 3-column layout
Sharon Go wrote: Everything worked fine. But since our services are available in a variety of languages, I tested the layout in RTL format. When the window is resized to less than 680px, the left-hand content slides under the window and simply disappears. It's not even accessible by a scrollbar. Depends on browsers' RTL support. - Opera 8+, Firefox 3b and IE7 produce a horizontal scrollbar (IE7 may need a refresh once the window is narrowed, just to catch up), and they all treat the RTL version pretty similar to an LTR version, only in reverse, of course. - Safari 3.1(win) and Firefox 2.x do not handle overflowing RTL well, and you're probably seeing the failure in an Fx2 version. - IE6 can't handle the holy grail layout in any direction without a lot of help, but will otherwise handle RTL well. - IE8b1 is completely lost, but that's nothing to worry about at this stage. http://goxsha.googlepages.com/bare-bones-column.htm I suggest you do some testing with a fixed-width container - a single-column construction - in RTL vs. LTR across browser-land, and make notes of which browser-versions that provide good enough RTL support for your needs. They're slowly getting there. A small enough width (min-width) should prevent serious problems in older versions. Another alternative is to move the RTL from the browser-window to a wrapper-div. This RTL in an LTR window approach is of course not a good one in your case, but at least it will work. I use it here... http://www.gunlaug.no/tos/moa_11f-rtl.html ...but for a different purpose. That holy grail layout is one of the least tested layouts I've seen so far, so it may not be the best choice in any case. However, once you've got IE6' bugs and weaknesses under control the holy grail itself should work pretty well. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Works great in IE7, not so much in FF/Safari
Very interesting. The first fix made the site work in all the
browsers, but boy, did it break the rendering in the DW! Now my main
content and the donate button are hanging off the right edge of my
content box and kind of off the edge of the DW window. Could the
float:left on the div#nav AND the float:left on div.list-menu be
causing that? The div#nav wraps the div.list-menu and div.donate.
On the donate button sitch. Sorry I wasn't clearer. I don't want the
donate button to be part of the navigation box. I want it to be below
it and centered underneath it. The version you gave me a link to was
totally broken, because the box for the navigation is a background
image that is only 230px high and should only have navigation in it.
Your fix caused the background box to start doing some sort of tiling.
Theresa Mesa
Mesa Design House
http://mesadesignhouse.com
909-796-5739
909-796-5789 (Fax)
On Mar 28, 2008, at 1:49 AM, Gunlaug Sørtun wrote:
tmesa.mesadesignhouse wrote:
In IE7 (I haven't checked IE6 yet), the navigation centers vertically
perfectly. In FF (on PC and Mac) and Safari, the navigation is going
to the top of the box that is a background image. I can't for the
life of me figure out why.
IE6 and IE7 are cheating - the effect of 'hasLayout'[1], which means
no
other browser - including IE8 - will follow their lead without some
proper styling.
To fix, add a new box formatting context[2] generating style,
like...
div.list-menu {
float: left;
width: 100%;
}
...to keep the margin-top on div.list-menu ul from escaping
div.list-menu and join - collapsing[3] into - its margin-top.
I used that particular styling with 'float', to avoid problems with
some
of the alternatives in even older IE/win versions.
Then I need to put the donation box (in its own div) in the
horizontal center of that 250px width of the nav box that wraps
both the list- menu div and the donation div, not flush left. Have
a feeling this may be a parent-child or ancestor thing that I can't
figure out. I can't get that to work on any of the browsers I've
checked today.
Not sure if I understand how you want that to appear visually, so
here's
a partial and pretty rough example on how I would do it...
http://www.gunlaug.no/tos/alien/tm/test_08_0328.html
CSS:
http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc.css
Some cross-browser tuning still needed to make it appear the same
everywhere, I think, but the basic markup and CSS changes are there.
You need two - different - background-images for it to make it look
right. I just reused the single one you have in there, so the upper
corners show up for the lower one. You'll get the idea.
Note: make those background-images tall enough and allow the container
to stretch in height, to allow for some font-resizing. Fixed height
means it'll break under stress, so I've commented that height out
for now.
I was able to validate the CSS and HTML on this. :-) You guys have me
trained.
Good - it helps :-)
http://mdh-test.com/ieresidential/index.shtml
http://mdh-test.com/ieresidential/ierc.css
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[3]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] removing tables from my template
My site was converted to a template of tables and divs last year. I am trying to make it tableless. I am having quite a bit of trouble doing so. I am working on the main content area first, even though there are tables above and below it. This is because I have assistance on moving over the content for the next few weeks only and the tables above and below the main content area are in includes which I can independently adjust later. The last table in the content area sets the size of the main content (in class lvl1 and then sets a background image (in td class lvl3). When I surround the table in a div and give it the same class as the table, but for a div, it doesn't fill the whole space or not as well as the table. Here is an example of surrounding the table in a div (in an eventual effort of losing the table): http://sph.umd.edu/home/blank2.cfm and here is an example of it looking correct with tables: http://sph.umd.edu/home/blank.cfm Eventually I want to remove the whole table, so I need to work on removing the class from the td too, which went horribly badly. Any advise on working this out is gratefully accepted. It doesn't validate, but I only have 2 errors and this is an effort to eliminate those too. thank you. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Prohibit Font resizing (cross browser)
Howdy all: I'm looking to prohibit the users from resizing font in one div on a page, and the solution needs to be cross browser. It's used in a header and pretty large, so accessibility isn't a concern, I just don't want the layout breaking. Anybody have any ideas how best to lock a font size to a pre-determined size? Thanks, Kent __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Prohibit Font resizing (cross browser)
I'm looking to prohibit the users from resizing font in one div on a page, and the solution needs to be cross browser. It's used in a header and pretty large, so accessibility isn't a concern, I just don't want the layout breaking. Anybody have any ideas how best to lock a font size to a pre-determined size? Thanks, Use a graphic? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Prohibit Font resizing (cross browser)
Kent Broestl wrote: I'm looking to prohibit the users from resizing font in one div on a page, and the solution needs to be cross browser. It's used in a header and pretty large, so accessibility isn't a concern, I just don't want the layout breaking. Anybody have any ideas how best to lock a font size to a pre-determined size? Kent Chisel it in stone and uploaded the stone to your host/server? Or set it as an image. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Prohibit Font resizing (cross browser)
On 3/28/08, Christian Heilmann [EMAIL PROTECTED] wrote: Use a graphic? the trend with browsers seems to moving towards zoom (yuck) instead of a simple text resize, so i'm not sure how long the graphic idea would work. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Works great in IE7, not so much in FF/Safari
Sorry!! I didn't mean to sound like I was criticizing you! And your fix for the donation box worked this time (because it's below the navigation), but I haven't checked it in all the browsers. I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. Kind of makes it hard to lay things out when the divs are all akimbo. When it looks like that in DW, I kind of feel like I've taken the pieces, thrown them up in the air, uploaded them to the server, and hope they go where they're supposed to without a lot of extra work. Of course, I'm a print designer first, so I'm used to looking at things where they're supposed to be before they ever go to press (or in the case of websites, to the server). I'm going to set the navigation font size so it doesn't resize. The words are pretty big as it is. But thank you so much for your help! I'll dig into this some more. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 9:20 AM, Gunlaug Sørtun wrote: tmesa.mesadesignhouse wrote: Very interesting. The first fix made the site work in all the browsers, but boy, did it break the rendering in the DW! Now my main content and the donate button are hanging off the right edge of my content box and kind of off the edge of the DW window. Could the float:left on the div#nav AND the float:left on div.list-menu be causing that? The div#nav wraps the div.list-menu and div.donate. Forget DW's rendering. DW is not a browser. On the donate button sitch. Sorry I wasn't clearer. I don't want the donate button to be part of the navigation box. I want it to be below it and centered underneath it. The version you gave me a link to was totally broken, because the box for the navigation is a background image that is only 230px high and should only have navigation in it. Your fix caused the background box to start doing some sort of tiling. Not tiling, but demonstrating how such a background should be applied if you don't want the nav to look broken in every browser on earth when subjected to font-resizing. I didn't bother to create the two images necessary for the effect, since it was just a quickly made example. Of course, what your design can take, or not, is not my problem, and you didn't ask for a solution. Reload my example to see the easily broken version, with the centered button below the nav... http://www.gunlaug.no/tos/alien/tm/test_08_0328.html CSS: http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc.css regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Works great in IE7, not so much in FF/Safari
tmesa.mesadesignhouse wrote: I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. You can't trust viewing anything in an editor. Maybe someone on the list can give you the settings necessary to view the local file from DW in your browser (s). In the meantime, open any browser, click file, and then click the file you want to view in the browser you've opened. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Works great in IE7, not so much in FF/Safari
Yeah, I know I can't trust anything in an editor, but if it comes close, I know I'm going in the right direction. I can do the same thing you suggested in DW, but I use server side includes, too, and that doesn't serve up the SSIs. The editor does display SSIs. I have to actually upload it to my test server to see, if the editor can't be used. Thanks!! Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 10:03 AM, David Laakso wrote: tmesa.mesadesignhouse wrote: I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. You can't trust viewing anything in an editor. Maybe someone on the list can give you the settings necessary to view the local file from DW in your browser (s). In the meantime, open any browser, click file, and then click the file you want to view in the browser you've opened. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
Oh, i think i figured it out... On Fri, Mar 28, 2008 at 12:10 PM, Phoebe Taylor [EMAIL PROTECTED] wrote: I've been trying to play around with an idea that I had for a sliding doors type link, but one that i don't want text on. Is it possible to use the sliding doors image .jpg as the moving background underneath - the graphic says, 'Church Calendar' and would shift upon hover. On top of that, could one use a very low transparency .gif as something to hook the image map link to? Would the .jpg show through the .gif? I really don't want the link to be text, just a graphic. Phoebe -- Words I have learned to spell from CSS-Discussion list - scissors, tortoise, hover (not hoover) -- Words I have learned to spell from CSS-Discussion list - scissors, tortoise, hover (not hoover) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
or maybe not...
the html - which I've tried with .png and .gif images:
p class=calendara href=calendar.html class=eventsimg
src=graphics/calendar.gif alt=Church Calendar width=166px
height=75px border=0/a/p
the css:
a.events {
display: block;
width: 166px;
height: 75px;
text-align: center;
text-decoration: none;
background: url('graphics/calendarslide.jpg') no-repeat;
}
a.events:hover active {
background-position: 0 0 0 -166px;
}
Shouldn't I see the background image under the .gif or .png that I'm
trying to use as the link? Is what I'm attempting possible?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Works great in IE7, not so much in FF/Safari
I can view it in the real browsers on and offline, but if I try to view a file with SSIs in it, it doesn't serve up the content of the SSIs, too, if I'm offline, you know, them being *server* side includes. The editor lets me view it, but not the offline browser viewing. I'm going to pull everything out of the SSIs until I make sure my layout is working. I'm going to get rid of the background box for the navigation and do it normally, rather than as a background image, although I'm researching rounded corners and CSS, since that's what the client likes. That way I don't have to have fixed font sizes. I've been making things too difficult for myself. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 10:26 AM, Gunlaug Sørtun wrote: tmesa.mesadesignhouse wrote: Sorry!! I didn't mean to sound like I was criticizing you! No problem - either way :-) I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. Relying on WYSIWYG software's rendering for web design is a recipe for disaster, IMO. All my tools let me view my creations in a series of real browsers off/on-line, and I can't imagine what else I should view them in. I'm going to set the navigation font size so it doesn't resize. The words are pretty big as it is. There's no way to set fixed font-size in HTML/CSS based web design. Those who think they can do so are probably victims of an illusion created by IE/win's apparent fixed pixels, which are easily ignored in same browser - often with disastrous results. I advice you to not waste time trying to prevent font-resizing, and instead test what happens if/when resizing is applied and make your designs adjust to it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS parse error
Cory Shubert wrote:
I have been trying to figure out why I am getting this when I
validate, but so far nothing is working for me.
Getting _what_?
CSS is;
div.shaded-bordered-item {
margin: 1em 0;
border: 1px solid #069;
padding: 4px;
background-color: #dfeefd;
}
When I copied and pasted it in the W3C CSS Validator's By direct input
interface, it validates. So what is the problem?
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS parse error
Cory Shubert wrote:
I have been trying to figure out why I am getting this when I validate,
but so far nothing is working for me.
Any ideas?
CSS is;
div.shaded-bordered-item {
margin: 1em 0;
border: 1px solid #069;
padding: 4px;
background-color: #dfeefd;
}
I don't think I understand. The above CSS is valid. Can you provide a
clickable link to the the page that exhibits the problem, and/or
articulate more clearly what is wrong?
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Button displace issue
Hi,
I have an odd button element issue specific to IE6. When I create a button
element and set text-indent ( to displace the value text ) the button
disappears in IE6.
If I add a non-breaking space , or line break or character before the button
it displays fine. Has anyone had any experience with this ? What is wrong
with my button ?s this what it sounds like... when doves cry ?
/* CSS */
.btn {
position: relative;
background:transparent url(btn_grn_submit.gif) no-repeat scroll left
top;
border:0pt none;
cursor:pointer;
width:98px;
height:26px;
margin:0pt;
padding:0pt;
text-indent: -px;
overflow:hidden;
vertical-align:middle;
}
.btn:hover {
background: transparent url(btn_grn_submit.gif) no-repeat 0 -26px;
}
!-- HTML --
button name=Some Button title=Some Title class=btn
type=buttonGreen Button/button!-- is hidden in IE6 --
nbsp;button name=Some Button title=Some Title class=btn
type=buttonGreen Button/button !-- but this works fine in IE6 --
online example:
http://thevenusflytrap.org/button_trials/index.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button displace issue
btw I copied the source from firebug, which is why it displays margin set
to 0pt. i realize that looks like that. fyi. thank you.
Hi,
I have an odd button element issue specific to IE6. When I create a button
element and set text-indent ( to displace the value text ) the button
disappears in IE6.
If I add a non-breaking space , or line break or character before the
button it displays fine. Has anyone had any experience with this ? What is
wrong with my button ?s this what it sounds like... when doves cry ?
/* CSS */
.btn {
position: relative;
background:transparent url(btn_grn_submit.gif) no-repeat scroll
left top;
border:0pt none;
cursor:pointer;
width:98px;
height:26px;
margin:0pt;
padding:0pt;
text-indent: -px;
overflow:hidden;
vertical-align:middle;
}
.btn:hover {
background: transparent url(btn_grn_submit.gif) no-repeat 0 -26px;
}
!-- HTML --
button name=Some Button title=Some Title class=btn
type=buttonGreen Button/button!-- is hidden in IE6 --
nbsp;button name=Some Button title=Some Title class=btn
type=buttonGreen Button/button !-- but this works fine in IE6 --
online example:
http://thevenusflytrap.org/button_trials/index.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 truncating DIVs
I just realized something that has probably been a pretty long-standing problem, but which somehow escaped me before (I don't think the site behaved this way in my then-current version of IE6, since I'm sure I tested with it, but it does on browsershots.org and my IE6 standalone)... Nearly all of the content on my site at http://www.kungfu-silat.com/ is encased in DIVs. Unfortunately, IE6 (at least some revisions) seems to be truncating my DIVs and only displaying the first line of text in each one (and the top of the second line). What can I do to fix this, aside from redesigning the site? Thanks, -- Erik Harrishttp://www.eHarrisHome.com -AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172- Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 truncating DIVs
Erik Harris wrote:
http://www.kungfu-silat.com/ Unfortunately, IE6 (at
least some revisions) seems to be truncating my DIVs and only displaying
the first line of text in each one (and the top of the second line).
What can I do to fix this, aside from redesigning the site?
Feed IE/6:
* html div.section {overflow:visible;}
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
I don't have access to the webspace for the church, so I made a folder on the knife site. I put a dashed blue border around where the sliding doors - transparent gif should be showing. The .html validates -- I do have one parse error in CSS, that I think is due to a hack for IE. http://www.cgraytaylor.net/sullivan/index3.html Phoebe -- Words I have learned to spell from CSS-Discussion list - scissors, tortoise, hover (not hoover) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] *I FIXED IT!* WAS: Works great in IE7, not so much in FF/Safari
:-) Well, I know the web isn't print. I was talking about the tools to work with the file. I build a logo, it's in Illustrator. I build a business card, I use InDesign. I futz with an image or photo, I use Photoshop. Each allows me to see how it's going to look as I work. BTW, *I FIXED IT!!* I mean the way it was displaying in DW. I KNEW it was that second float that was mucking up the works! So for div#nav, I had float:left, and then for div.list-menu, which was inside div#nav, I did float:inherit, since it was a div class inside a div id. The layout in DW lines right up, now. OMG!! Works on FF, Safari, IE6 and IE7. It also would have helped, with the donation thing, if I was calling the class out by the correct name. Duh. I gave up on the rounded corners for right now and made the text resizable. The site needs to be accessible. Still, I couldn't have fixed this without your help, Gunlaug and David!!! And thank you, Jason, for the words of cheer. You all rock! MAJOR lessons learned today. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) The hardest part for me was realizing that the web is not print... Unfortunately we don't have full control over how it looks unless we make it a PDF to download, which isn't optimal. Once I was okay with it not being pixel perfect, my life got a lot less stressful! Just thought I would share my experience since we have somewhat close to the same perspective! :) But thank you so much for your help! I'll dig into this some more. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
From: Phoebe Taylor [EMAIL PROTECTED] I put a dashed blue border around where the sliding doors - transparent gif should be showing. The .html validates -- I do have one parse error in CSS, that I think is due to a hack for IE. http://www.cgraytaylor.net/sullivan/index3.html Phoebe, Have you checked that the path is correct for your sliding image? It appears to be the same path as the one that's in the HTML, but that wouldn't be the correct pathway from the CSS file, since you have that in a different spot. ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
Have you checked that the path is correct for your sliding image? It appears to be the same path as the one that's in the HTML, but that wouldn't be the correct pathway from the CSS file, since you have that in a different spot. ~holly oh, okay.. I see now. My other site had the css and html files all in one directory. I didn't even think about the path there. Okay, so now i see the background, so half the battle won. Now I just need to get it to slide over to see the right half on hover. -- Words I have learned to spell from CSS-Discussion list - scissors, tortoise, hover (not hoover) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
From: Phoebe Taylor [EMAIL PROTECTED]
oh, okay.. I see now. My other site had the css and html files all in
one directory. I didn't even think about the path there.
Okay, so now i see the background, so half the battle won. Now I just
need to get it to slide over to see the right half on hover.
http://www.cgraytaylor.net/sullivan/index3.html
a.events:hover active {
background-position: 0 -166px;
}
That selector selects an element called active, that is inside an anchor with
the class name events the anchor is hovered. I suspect that since there isn't
an element type active that your selector isn't going to select anything. Did
you mean -
a.events:hover, a.events:active {
background-position: 0 -166px;
}
??? creating a selector for both the hover and active states?
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image/Map? sliding doors effect
That selector selects an element called active, that is inside an anchor
with the class name events the anchor is hovered. I suspect that since
there isn't an element type active that your selector isn't going to select
anything. Did you mean -
a.events:hover, a.events:active {
background-position: 0 -166px;
}
??? creating a selector for both the hover and active states?
~holly
Oh, I see now. So, that's how you shorthand the selectors.
Brilliant! now it works! -cheers-
Phoebe
--
Words I have learned to spell from CSS-Discussion list - scissors,
tortoise, hover (not hoover)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] browser combatibility issues
| I don't have IE 5 on the Mac and there is no IE 6 or 7, so no | worries | there. | Good luck. | Zack Frazier Can someone please take a look at the site in IE on a mac and offer some guidance as to why it's messing up the site's layout so badly? Just a reminder, the url is http://www.objectivedesigns.com/rsdp/nwc/, and the css is http://www.objectivedesigns.com/rsdp/nwc/index.css. That browser/platform is having some major page layout issues. If you click around to the different pages, you'll see what I'm talking about. Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
