Re: [css-d] conflict with suckerfish dropdowns and Flash in IE
have you put wmode=transparent in the EMBED tag? that usually is what's missing. 2008/5/1 Chris Kavinsky [EMAIL PROTECTED]: I'm having trouble with an IE problem that I'm hoping someone here can help with. I'm building a site using suckerfish dropdowns on the navigation, and also using sIFR for the headlines, and have a rotating Flash using slideshow on the home page. The problem with IE is that the dropdown (far right menu item) is hiding behind the slideshow on the home page, and the sIFR headline on the interior pages. I added a z-index to the nav hoping that would fix it, but no luck. Any suggestions? web site: http://209.235.210.229/ CSS file: http://209.235.210.229/css/08styles.css __ 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/ -- Vincent Pollard http://www.ithinkx.co.uk __ 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] conflict with suckerfish dropdowns and Flash in IE
That did it. I can be a dumbass sometimes. Thanks. On Thu, May 1, 2008 at 9:21 AM, vincent pollard [EMAIL PROTECTED] wrote: have you put wmode=transparent in the EMBED tag? that usually is what's missing. 2008/5/1 Chris Kavinsky [EMAIL PROTECTED]: I'm having trouble with an IE problem that I'm hoping someone here can help with. I'm building a site using suckerfish dropdowns on the navigation, and also using sIFR for the headlines, and have a rotating Flash using slideshow on the home page. The problem with IE is that the dropdown (far right menu item) is hiding behind the slideshow on the home page, and the sIFR headline on the interior pages. I added a z-index to the nav hoping that would fix it, but no luck. Any suggestions? web site: http://209.235.210.229/ CSS file: http://209.235.210.229/css/08styles.css __ 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/ -- Vincent Pollard http://www.ithinkx.co.uk __ 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] Margin (?) issue in IE6
Yet another it looks fine in FF but all messed up in IE request for help, I'm afraid. I have a page generated by a Word to Web tool with this structure: div id=header h1/h1 /div div id=main-content-notoc h2Always h2 here/h2 /div div id=footer/div etc. I've put background images on #header and #main-content-notoc and positioned them just so. In Firefox, it's as I want it. In IE6 there appears to be a 37-ish px margin at the top of #header, pushing everything down and messing the whole thing up. Link: http://www.pauljinks.co.uk/itc/literacyTest/page_01.htm CSS: http://www.pauljinks.co.uk/itc/literacyTest/cg.css Many thanks in advance - I really am not worthy. Paul Jinks __ 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] Margin (?) issue in IE6
Paul Jinks wrote:
Yet another it looks fine in FF but all messed up in IE request for
help, I'm afraid.
http://www.pauljinks.co.uk/itc/literacyTest/page_01.htm
http://www.pauljinks.co.uk/itc/literacyTest/cg.css
Paul Jinks
h1 {margin:0;}
img {display:block;}
--
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] ul/li alignment fails when height is longer than one line
I'm trying to replicate a table and really am not very good at it yet. It has one column, Department, than can be quite long. I gave it a max width so that it would wrap to multiple lines. Then it is followed by another column, Status. Status isn't multi-lines, so what it does is continue the next line under the status. I tried putting a clear:both on Status thinking it would shift everything else to the next line, but no. This all works if any column doesn't go to two lines. You can see an example of it here (which will show the problem better than I explained it): http://sph.umd.edu/about/dean/expenditure_db/test.cfm -- 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/
Re: [css-d] ul/li alignment fails when height is longer than one line
Well, I would say this counts as tabular data, which would call for you to actually use a table. It would make sense and solve your problem. Valerie On Thu, May 1, 2008 at 11:34 AM, Daniel Kessler [EMAIL PROTECTED] wrote: I'm trying to replicate a table and really am not very good at it yet. It has one column, Department, than can be quite long. I gave it a max width so that it would wrap to multiple lines. Then it is followed by another column, Status. Status isn't multi-lines, so what it does is continue the next line under the status. I tried putting a clear:both on Status thinking it would shift everything else to the next line, but no. This all works if any column doesn't go to two lines. You can see an example of it here (which will show the problem better than I explained it): http://sph.umd.edu/about/dean/expenditure_db/test.cfm -- 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/ -- Valerie Wininger www.valeriewininger.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] Floated ULs Disappearing Margins in IE7
Hello, I have been going crazy over the last 2 days trying to figure out why in IE7 the bottom margins on the uls that are placed to the right (blue green backgrounds) have collapsed. Even if I wrap a div around them they still refuse to budge. Meanwhile the ULs that are sitting left seem to retain their bottom margins. This is the 3rd time I am posting about the problem - I really am hoping for a solution as I only got one response which only addressed part of the problem with another element. http://e7flux.com/placead/placead3.html http://e7flux.com/placead/css/placead.css TIA, Elli Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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] Floated ULs Disappearing Margins in IE
Maybe I'm missing something...but they look the same to me in IE7 as they do in FF. Valerie On Thu, May 1, 2008 at 12:58 PM, Elli Vizcaino [EMAIL PROTECTED] wrote: Hello, I have been going crazy over the last 2 days trying to figure out why in IE7 the bottom margins on the uls that are placed to the right (blue green backgrounds) have collapsed. Even if I wrap a div around them they still refuse to budge. Meanwhile the ULs that are sitting left seem to retain their bottom margins. This is the 3rd time I am posting about the problem - I really am hoping for a solution as I only got one response which only addressed part of the problem with another element. http://e7flux.com/placead/placead3.html http://e7flux.com/placead/css/placead.css TIA, Elli Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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/ -- Valerie Wininger www.valeriewininger.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] ul/li alignment fails when height is longer than one line
Hi Daniel, You are presenting data in you document. The content on the page isn't a list of items. The semantic HTML element to present data is the TABLE element. Tables are suppose for data presentation is the mantra. So, use a table. Regards, Mauricio Samy Silva http://www.maujor.com Author do livro: Construindo Sites com CSS e (X)HTML http://livrocss.com.br - Original Message - From: Daniel Kessler [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, May 01, 2008 12:34 PM Subject: [css-d] ul/li alignment fails when height is longer than one line I'm trying to replicate a table and really am not very good at it yet. It has one column, Department, than can be quite long. I gave it a max width so that it would wrap to multiple lines. Then it is followed by another column, Status. Status isn't multi-lines, so what it does is continue the next line under the status. I tried putting a clear:both on Status thinking it would shift everything else to the next line, but no. This all works if any column doesn't go to two lines. You can see an example of it here (which will show the problem better than I explained it): http://sph.umd.edu/about/dean/expenditure_db/test.cfm -- 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 .org/help_support_evolt/ __ 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] div problem - children not displaying as children
Jeff Blaine wrote:
Interesting. I wish I understood why 'overflow: hidden' solves the
problem. I don't like adding things that I don't fully understand.
What overflow am I hiding? Why is 'overflow: hidden' the magic that
states, these children belong to the enclosing div. It just seems
awful obtuse to me.
The magic is standardized, and is known as establishing of a new
'block formatting context'[1]. Which property/value to use depends on
the case since each of the properties/values that triggers the magic
also have other effects.
In IE7, IE6 (and older) 'hasLayout'[2] triggers have similar magical
effects.
Curiously, I also found that adding float: left; to #bottomrow also
solved the problem.
Same magic.
I took that out though and used overflow: hidden and it seems to
work fine in IE6, IE7, and FF3b5.
overflow: hidden may destroy rendering in IE5.x - in case that matters.
The safest solution is to double-style, like so...
#element-id {overflow: hidden;}
*html #element-id {overflow: visible; height: 1%;}
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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] ul/li alignment fails when height is longer than one line
alright. I dunno if it's actually tabular data and I have a difficult time determining if it is or isn't. It's a list of records from a database and that list is presented here to choose which record to edit. but I know how to use tables fine, so that's easy enough. thank you daniel On May 1, 2008, at 1:18 PM, Mauricio ((Maujor)) Samy Silva wrote: Hi Daniel, You are presenting data in you document. The content on the page isn't a list of items. The semantic HTML element to present data is the TABLE element. Tables are suppose for data presentation is the mantra. So, use a table. Regards, Mauricio Samy Silva http://www.maujor.com Author do livro: Construindo Sites com CSS e (X)HTML http://livrocss.com.br - Original Message - From: Daniel Kessler [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Thursday, May 01, 2008 12:34 PM Subject: [css-d] ul/li alignment fails when height is longer than one line I'm trying to replicate a table and really am not very good at it yet. It has one column, Department, than can be quite long. I gave it a max width so that it would wrap to multiple lines. Then it is followed by another column, Status. Status isn't multi-lines, so what it does is continue the next line under the status. I tried putting a clear:both on Status thinking it would shift everything else to the next line, but no. This all works if any column doesn't go to two lines. You can see an example of it here (which will show the problem better than I explained it): http://sph.umd.edu/about/dean/expenditure_db/test.cfm -- 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 .org/help_support_evolt/ -- 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] Trying again...It's got to be a CSS thing
http://mdh-test.com/Quiel/index.shtml http://mdh-test.com/Quiel/quiel.css http://mdh-test.com/Quiel/includes/navigation.html http://mdh-test.com/Quiel/includes/rtSide.html http://mdh-test.com/Quiel/includes/quiel_js.js (the navigation uses JS) I'm recoding this site so my client can work with it in Contribute CS3. The background art on this has been reconstructed from little slices and dices and is now in two pieces, with the top being sliced just above the top of the curve near the bottom. The fill div contains a 1px-high strip that will fill in the black-white-black of the bottom part for when the page expands. I have a flashing gif that is hanging off the left side. Other art is laying on top of the bakcground art. One problem I've been running into since the beginning, pretty much, is that the section of content between the page header (Welcome) and that animated GIF on the left is uneditable, unless I'm in the code view of DW CS3. If I click on that section within design view, it grabs the page header, not what I've clicked on. Once I go into Contribute into the Edit Page, this area of the page is uneditable. I'm not talking about the parts put into SSIs (the left and right sides and footer). It's not a Contribute issue, per se, because I noticed I was having problems in the design view of DW as I was building the site. Y'all kept telling me I couldn't trust the way DW was rendering the page, and I needed to pay attention to how it looked on the browser instead. So I did, even though I was having major issues with laying it out. Worked fine in the browsers. It's not the JavaScript, because I saved a test-version of the page, took out the JavaScript, and tried to click on the text in the content area of the design view. Same thing. But now the problem I was having in DW has come to bite me in the butt in Contribute. I can't access the same area for editing, just the area of content below the nav flashing sign. Even if you're not familiar with Contribute, perhaps you could look at the code and see why I can't access this area in DW. Is it a flow issue of the divs? Have I put something in the code that is breaking this? What do I need to do to fix this? Can anyone help?? My client won't be happy AT ALL if he can't access this area. What have I done wrong? I know I've div'ed the heck out of this, but there is so much going on that needs to be placed *just so* because it has to essentially match the original site. My CSS and HTML validates. Thank you so much in advance for your help. Theresa __ 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] ul/li alignment fails when height is longer than one line
On May 1, 2008, at 10:49 AM, Daniel Kessler wrote: alright. I dunno if it's actually tabular data and I have a difficult time determining if it is or isn't. It is. It's a list of records from a database and that list is presented here to choose which record to edit. It doesn't matter where the data comes from... but for that matter, in traditional RDB-speak a list of records is called a table, and the records are called rows and the fields are called columns :-) Dude, it's a table. This is what table is for. Exactly what it is for. cheers :-), —ml— __ 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] list nav not working as needed
Trying again, looking for a few ideas on where to go...
I am having a problem and can't seem to see the elegant solution. I
have a simple ul list nav with rollover states. I need to have the
selected state show without any background, just white, to blend in with
the content below it.
The nav was created in CSS and didn't have this look built in and I just
can't seem to figure it out without wasting a ton of code to do it. I
have tried to have a selected or non link style so that the background
would just be white, but if the selected link is selected, then it
doesn't need a ahref tag and thus breaks the CSS function...
Any help would be greatly appreciated.
HTML :
div id=tabsE
ul
lia href=# title=Hotel OverviewspanHotel
Overview/span/a/li
lia href=# title=Room TypesspanRoom Types/span/a/li
lia href=# title=Property InfospanProperty
Info/span/a/li
lia href=# title=Good to KnowspanGood to
Know/span/a/li
lia href=# title=Link 5spanHotel Slideshow/span/a/li
/ul
/div
CSS :
#tabsE {
width: 733px;
margin: -25px 0 0 0;
padding: 0;
position: relative;
}
#tabsE ul {
margin:0;
padding:0;
list-style:none;
width:auto;
float:right;
font:bold 11px Arial,Verdana,Helvetica,sans-serif;
}
#tabsE li {
display:inline;
margin:0;
line-height:1.5em;
}
#tabsE a {
float:left;
background:url(tableftE_1.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url(tabrightE_1.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
Thank you,
Cory Shubert
__
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] list nav not working as needed
Cory, Can you upload your page to a server and send us the URL? Jim On Thu, May 1, 2008 at 12:58 PM, Cory Shubert [EMAIL PROTECTED] wrote: Trying again, looking for a few ideas on where to go... I am having a problem and can't seem to see the elegant solution. I have a simple ul list nav with rollover states. I need to have the selected state show without any background, just white, to blend in with the content below it. The nav was created in CSS and didn't have this look built in and I just can't seem to figure it out without wasting a ton of code to do it. I have tried to have a selected or non link style so that the background would just be white, but if the selected link is selected, then it doesn't need a ahref tag and thus breaks the CSS function... Any help would be greatly 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] list nav not working as needed
Yes, but it won't be until tomorrow... no server set up for this at present... I will have to stick it on my personal one and then send the link. Thank you, Cory From: Jim Davis [mailto:[EMAIL PROTECTED] Sent: Thursday, May 01, 2008 3:15 PM To: Cory Shubert Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] list nav not working as needed Cory, Can you upload your page to a server and send us the URL? Jim On Thu, May 1, 2008 at 12:58 PM, Cory Shubert [EMAIL PROTECTED] wrote: Trying again, looking for a few ideas on where to go... I am having a problem and can't seem to see the elegant solution. I have a simple ul list nav with rollover states. I need to have the selected state show without any background, just white, to blend in with the content below it. The nav was created in CSS and didn't have this look built in and I just can't seem to figure it out without wasting a ton of code to do it. I have tried to have a selected or non link style so that the background would just be white, but if the selected link is selected, then it doesn't need a ahref tag and thus breaks the CSS function... Any help would be greatly 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/
[css-d] new design, horizontal menu issues
Hi folks, I'm using a nice drop-down menu from Project7 on a new project. When viewing at 1280x1024 or greater, all works as expected (for a very early markup draft). However at resolutions like 1024x768, I'm getting menu wrapping which is definitely affecting the usability of the site, not to mention the aesthetics. Site: http://www.swhidevel.com/ I'm feeding it a css reset (http://www.swhidevel.com/styles/reset.css) before handing off the site styles (http://www.swhidevel.com/styles/sunbuild.css). Any pointers would be greatly appreciated. Thanks in advance, -Ray -- Non scholae sed vitae discimus = __ 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] new design, horizontal menu issues
From: Ray Leventhal [EMAIL PROTECTED] To: css-d css-d@lists.css-discuss.org Sent: Thursday, May 01, 2008 5:00 PM Subject: [css-d] new design, horizontal menu issues Hi folks, I'm using a nice drop-down menu from Project7 on a new project. When viewing at 1280x1024 or greater, all works as expected (for a very early markup draft). However at resolutions like 1024x768, I'm getting menu wrapping which is definitely affecting the usability of the site, not to mention the aesthetics. Site: http://www.swhidevel.com/ I'm feeding it a css reset (http://www.swhidevel.com/styles/reset.css) before handing off the site styles (http://www.swhidevel.com/styles/sunbuild.css). Any pointers would be greatly appreciated. Hi Ray, You need a min-width on the body element and/or to apply the menuwrapper background to the root menu items (a) so that when your menu does wrap, you will be able to read the text. The tutorial example for this particular menu uses em widths to prevent wrapping: http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm You might want to consider that approach or perhaps pare down the number of root menu items you have. It's a lot for a horizontal menu. -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ 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] vertical spacing problem in IE7, and sizing fonts
I'm stumped by a CSS layout problem I'm having and hope someone can help me solve this. On this page, http://www.cahealthadvocates.org/2008/cmc/index.html css: http://www.cahealthadvocates.org/2008/_css/normal.css in the upper right, I have this text: Font size: Small - Large The problem I'm having is that on IE7, that text is pushed down and gets hidden (due to the depth of the div). In IE6, it gets pushed down a little, too, but not enough to really be a problem. The placement in Firefox (PC and Mac) is OK, as is placement in Safari (PC and Mac). What I want to do is get the alignment of the text to appear in IE7 as it does in Firefox and Safari. (Same old story, I know...). Any ideas about what I should do? I can't seem to figure this one out. Also, unrelated, I want to stop using pixels for font sizing, and use a method that allows for font scaling in IE7 and IE6. Can anyone point me to a good tutorial demonstrating an elegant and bullet-proof way to implement scalable fonts (sizing with percentages or ems, I suppose)? What is the state of the art method on that topic? Thanks for any help. Matt Jalbert Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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] table width problem in Firefox, or in every browser except FF.
So this works in all the other browsers (thats ie 6+7 and Safari) but not in any firefoxes. http://sandygonzales.com/test/calendar.htm I am trying to get the fancy curve lines at the bottom but in order to do that the table needs to be exact width by the pixel. That width is 743px. Thats 105px each box (7 boxes) plus 8 border lines for a total of 743. As you can see in the bottom left corner in FF the border goes out by 1pixel. The only way i can get it to be the correct width in FF is by adding a 1px border to the table and removing the border-collapse: collapse. But then i have uncollapsed cells! argh! Why wont is stay at 743pixels! Why is it off by only 1 pixel? __ 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] How to make one DIV appear at the bottom of another?
Erik Harris wrote: http://www.gunlaug.no/tos/moa_8d.html Interesting. This one doesn't work at all in IE6 (at least not in IE6-Standalone), despite supposedly being a way to make fixed positioning work in IE6. Then Holly Bergevin wrote: Just for the record, in a native installation of IE6, the above example works fine. A bit late on this one, but it works fine in my IE6 Standalone on XP Pro (using multipleIE while running a full install of IE7). FWIW, I've always found you can rely on the information Georg provides to be accurate and well tested. That isn't to say he can't be wrong from time to time, as we are all only human. Mark __ 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] table width problem in Firefox, or in every browser except FF.
On Thursday 2008-05-01 16:31 -0700, Sandy wrote: So this works in all the other browsers (thats ie 6+7 and Safari) but not in any firefoxes. http://sandygonzales.com/test/calendar.htm Why wont is stay at 743pixels! Why is it off by only 1 pixel? Two guesses (that I haven't verified) are that it could be related to: (1) browsers that follow or don't follow the statements in the CSS2 spec (which have changed over time at least once, I think) on whether the 'width' property, when applied to border-collapse table elements, is the width from mid-border to mid-border, or the width including the whole collapsed border (or maybe whether half the side border sticks out of the table's container), or (2) whether browsers do or don't use border-box sizing for table elements (e.g., -moz-box-sizing: border-box as a default rather than -moz-box-sizing: content-box). -David -- L. David Baron http://dbaron.org/ Mozilla Corporation http://www.mozilla.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] table width problem in Firefox, or in every browser except FF.
On May 2, 2008, at 8:31 AM, Sandy wrote:
So this works in all the other browsers (thats ie 6+7 and Safari) but
not in any firefoxes.
http://sandygonzales.com/test/calendar.htm
I am trying to get the fancy curve lines at the bottom but in order to
do that the table needs to be exact width by the pixel. That width is
743px. Thats 105px each box (7 boxes) plus 8 border lines for a total
of 743.
As you can see in the bottom left corner in FF the border goes out by
1pixel. The only way i can get it to be the correct width in FF is by
adding a 1px border to the table and removing the border-collapse:
collapse. But then i have uncollapsed cells! argh!
Why wont is stay at 743pixels! Why is it off by only 1 pixel?
Welcome to the world of tables and border-collapse:collapse
What Gecko does is absolute correct, per the specs.
The border on the left most cell is placed half 'out' of the table.
Here is an example using a 'fat' border (10px) on the second row of a
table
http://dev.l-c-n.com/_temp/tb-brd-collapse.html
And your table is still 743px wide. But the left-most border is kind a
pulled to the left by one 1px - how does one slice 1px on screen
(can't) ? The rest of the cells are then distributed evenly (correct).
Start by using
table {border-collapse:separate; border-spacing:0;}
td {border-right:1px solid; border-bottom:1px solid;}
for the top row only : td {border-top:1px solid;}
etc.
Philippe
---
Philippe Wittenbergh
http://l-c-n.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] How to make one DIV appear at the bottom of another?
On 5/1/2008 8:40 PM, Mark Henderson wrote: Erik Harris wrote: http://www.gunlaug.no/tos/moa_8d.html Interesting. This one doesn't work at all in IE6 (at least not in IE6-Standalone), despite supposedly being a way to make fixed positioning work in IE6. Then Holly Bergevin wrote: Just for the record, in a native installation of IE6, the above example works fine. A bit late on this one, but it works fine in my IE6 Standalone on XP Pro (using multipleIE while running a full install of IE7). I don't know what the issue is, then. I don't have JavaScript disabled in IE6, as one respondent suggested. I've got an IE6 Standalone installation (not multipleIE, but one in an archive labeled ie6eolas_nt) and IE7 installed normally. The URL above displays correctly in IE7 and FF3b5, but not in my copy of IE6 Standalone. Regardless, the other example did work in all three, but it's not what I primarily want to do. When I get some time (this weekend), I'm going to try it with an extra layer of nested DIV elements, and if that fails, I'll go ahead with a fixed footer. If I do, I'd rather go with the CSS-only implementation, as in the other example, as opposed to using JavaScript. -- 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] How to make one DIV appear at the bottom of another?
I hadn't seen this suggested, but is there any reason you couldn't do
something like this?
#sidebar {
float: left;
}
#footer {
clear: left;
}
__
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] vertical spacing problem in IE7, and sizing fonts
mattjal wrote:
http://www.cahealthadvocates.org/2008/cmc/index.html
css: http://www.cahealthadvocates.org/2008/_css/normal.css
What I want to do is get the alignment of the text to appear in IE7 as it
does in Firefox and Safari.
This will make it approximately the same cross-browser. Tweak to taste
(comparing cross-browser as you do so).
#headerNav ul {
/*margin: 7px 5px 7px 0 delete*/;
margin: 0 /*add*/;
padding: 0;
}
#fontSize { background : fuchsia;
clear: right;
/*padding: 7px 11px 0 0; delete*/
padding: 0 /*add*/;
text-align: right;
/*margin-left: 380px; delete*/
margin: 0 /*add*/;
color: #444;
font-size: 11px;
}
I want to stop using pixels for font sizing, and use a method that allows for
font scaling in IE7 and IE6. Can anyone point me to a good tutorial
demonstrating an elegant and bullet-proof way to implement scalable fonts
(sizing with percentages or ems, I suppose)? What is the state of the art
method on that topic?
Scaling fonts is a matter of opinion. The list wiki is a good place to
start. As for myself, I find percent for font-sizing throughout the
style sheet, with line-height set as a raw number, most consistent
cross-browser. As far as actual font-size and leading is concerned, this
is a good article: http://informationarchitects.jp/100e2r/
Matt Jalbert
--
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] center an image horizontally inside an overflow: hidden
On Wed, 30 Apr 2008 18:50:04 +, Martin Sammtleben wrote: At 14:35 -0400 30/4/08, S. Woodside wrote: Thanks for the link. I tried using background-image center center -- unfortunately this method doesn't meet my second criteria which is that the image be scaled to fit vertically. There does not appear to be any way to scale the image when using background. Well, you can use CSS to give an inline image specific dimensions, in ems, pixels, percents etc.. Most, but not all browsers will re-scale the other dimension proportionally if you specify just one of them. Assuming these images and their dimensions are not under your control, there are JavaScript and PHP solutions, among others. Try asking on a relevant list. Cordially, David -- __ 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/
