Re: [css-d] Div's not aligning right in IE7
Moxy, Thank you for responding. I was advised to use padding early in my CSS learning. The recommendation was to create a boundary div specifying margin:0 and padding:0 as shown in #leftMenu and then define internal margins, padding in a padding div as shown in #leftMenuPad below. That approach has served me well. I am trying to understand the principle behind what you are suggesting so that I might apply it to my situation. However, I don't quite grasp it. It seems that you are just putting in an extra div with padding inside another div without padding. How exactly does this make a difference? -- Dave M G Articlass - open source CMS http://articlass.org __ 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's not aligning right in IE7
Dave M G wrote: Following on my own post, I saw on the web that there might be a bug in IE7 that prevents margins from working properly. It was recommended that one could use padding instead, depending on the circumstances. What you're seeing in your page is not a browser-bug, but a designer-bug. You're floating elements inside a width-less absolute positioned element, while gambling on that Firefox' rendering is correct. There is no correct rendering for such an incomplete combination of elements and styles that you have offered those poor browsers, so they all come out with different solutions. Note that IE/win doesn't default to dead in the water positioning when a *position* is left out for an absolute positioned element. Other browsers do - more or less successfully, but they are just guessing on the rest. You can see that the text in the bottom right, which is in a div called '.footer-text-right', and has a 'padding:0px 50px 0px 0px;', the margin seems to be having no effect. Add... #footer { position: relative; } #footer-text { left: 50px; right: 50px; } ...and delete... .footer-text-right { padding:0px 50px 0px 0px; } ...and Firefox, Opera and IE7 will align the entire footer identical. Even IE6 is close, although that version can't absolute position an element's opposite sides and therefore gets the width wrong. 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] Div's not aligning right in IE7
Dave, You're exactly right. This approach does require extra divs but according to the advice I frequently get from experts-exchange.com that is the best technique. Here's an example: Me: I had a top margin on the left menu to bring it down but the top part of the text is hidden under the top menu. EE: If you put a margin on the left menu div, the div and margin together gets higher than the page. Put another div inside it and set the margin on that. Me: I created a div called leftMenuPad that sits inside of leftMenu and all is well on IE. On FF, however it's an entirely different story. The entire page is pushed down by the top margin set in leftMenuPad. I tried adding a contentPad like leftMenuPad for the section in grey but I get the same results. Works on IE but not on FF. On IE the left menu now extends the length of the browser however the content body in grey does not. EE: Add top: 0; to the top menu class. The boundary div provides the general characteristics required (width, height, etc.) and the padding div allows you to get more specific. This technique, at least for me, overcomes many browser deficiencies (i.e. IE/win) and works with with compliant browsers. If you contact me offline I'd be happy to send you one of my CSS files so you can see the big picture. - Tim Dave M G wrote: Moxy, Thank you for responding. I was advised to use padding early in my CSS learning. The recommendation was to create a boundary div specifying margin:0 and padding:0 as shown in #leftMenu and then define internal margins, padding in a padding div as shown in #leftMenuPad below. That approach has served me well. I am trying to understand the principle behind what you are suggesting so that I might apply it to my situation. However, I don't quite grasp it. It seems that you are just putting in an extra div with padding inside another div without padding. How exactly does this make a difference? __ 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's not aligning right in IE7
Big Moxy wrote: You're exactly right. This approach does require extra divs but according to the advice I frequently get from experts-exchange.com that is the best technique. Pardon my ignorance, but how can adding more divitis to a case of already quite extensive divitis be characterized as the best technique? In Dave's page that footer already has around twice as many divs as is needed for any browser released since - and including - IE5/win. The whole thing is just very poorly styled. A few direct pointers to quotes and cases where that approach actually is an advantage, might be useful, as I can't find any signs of HTML and/or CSS expertize in what's behind the site you're referring to and I'm too lazy to dig any further. 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] Div's not aligning right in IE7
I don't double div everything just the sections (e.g. content, menu, footer). I still sub-divide those divs. For example: footer footerPad footerRight /footerRight footerLeft /footerLeft /footerPad /footer I saw that Dave was struggling with his footer layout so I gave him my approach to layout design (without addressing his specific CSS). Again this is my opinion and I was sharing what works for me. - Tim Gunlaug Sørtun wrote: Big Moxy wrote: You're exactly right. This approach does require extra divs but according to the advice I frequently get from experts-exchange.com that is the best technique. Pardon my ignorance, but how can adding more divitis to a case of already quite extensive divitis be characterized as the best technique? In Dave's page that footer already has around twice as many divs as is needed for any browser released since - and including - IE5/win. The whole thing is just very poorly styled. A few direct pointers to quotes and cases where that approach actually is an advantage, might be useful, as I can't find any signs of HTML and/or CSS expertize in what's behind the site you're referring to and I'm too lazy to dig any further. regards Georg __ 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 - Sperling Vertical Menu
Pls see www.nayanindore.com The menu works first time in IE6 (XP) and then freezes! Grateful for suggestions to make it work. Thanks. -- Best, JL Jehangir Larry __ 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] CSS Resources
http://www.css-zibaldone.com/risorse/ skip the italian writings. there are about 2957 useful links on 'bookmarks'. bye :) ernie -- http://www.css-zibaldone.com/ http://mimicry.css-zibaldone.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] absolutely positioning an a into a li IE6 7
Is there something wrong in absolutely positioning within a li an a tag displayed as a block? Of course problems arise on Internet Exploder (I'm quoting Georg :-) ), both 7 and 6. If you try it this is the crap result on the browsers just mentioned: http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html Please follow: To properly display the works links at the bottom-right of the li on IE6 you need to add /width:100%/ to the li itself . Of course I've also added /position:relative/ to the li to activate /position:absolute + top: x /and /left: y/ values given to the a . As a consequence of the presence of the width property, the li get separed when the page size is increased (ctrl + mouse wheel). This is unfair! If you get rid of the absolute positioning method and position the works links simply by setting top and left margins then the want to tell you something more link gets covered (z-indexing doesn't do any good). This is what you get in IE6 and IE7: http://www.giuseppecraparottacv.co.uk/work-web-test-works.html Please note that both files contain CSS code. What shall I do? Try to position through float? I'm gonna try that... But could you please enlighten me on the above issue, I think I make no relevant mistake, that should work!!! Thanks a lot, G // __ 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's not aligning right in IE7
Big Moxy wrote: I saw that Dave was struggling with his footer layout so I gave him my approach to layout design (without addressing his specific CSS). Again this is my opinion and I was sharing what works for me. Fair enough. That we have different opinions is most often a good thing, as it brings some variation into the game. However, what you did was addressing _your_ case, not Dave's, since you did not address his _very_ specific CSS. I actually thought the approach you presented became obsolete and disappeared from serious web design many years ago, but obviously I was wrong. It definitely isn't a high-ranking alternative. Fixing the case at hand one bit at a time until it works - if at all possible, makes a lot more sense, IMO... http://www.gunlaug.no/tos/alien/dmg/test_07_1227.html ...(IE6 isn't supposed to be supported). 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] IE6 - Sperling Vertical Menu
Jehangir Larry wrote: Pls see www.nayanindore.com The menu works first time in IE6 (XP) and then freezes! Grateful for suggestions to make it work. Thanks. There is a reason why some of us try to avoid menus such as those. Isolate the menu (pull the menu from the page, and put it on another page all by itself). 1/ If you have the same problem with it isolated, go back to Sperling's original and start from scratch. 2/ If, when isolated, there is no problem, then there may be a js script (or css) conflict between the menu and the page it is in. Best, ~dL PS If all else fails, keep it simple: http://css.maxdesign.com.au/listamatic2/vertical02.htm -- 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] Table borders not working properly
I created a calendar with tables and all I want to do is control the borders for the table. When I apply CSS all of the tables on the page are being effected. I first surrounded the table with a div tag and then added a class attribute to the table, neither worked. Any suggestions would be appreciated. style type=text/css #calendar #table, td, th { border-color: #600; border-style: solid; } #calendar #table { border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; } #calendar td, th { margin: 0; padding: 4px; border-width: 1px 1px 0 0; background-color: #FFC; } /style Thanks __ 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] IE7 wraping URLs at the ? part...
It works everywhere else (FF, Opera, Safari), but IE7 seems to not like the ? in a url, and wraps it within a table cell. Markup is a cell in a table like this: td class=pana href=foo.com?long_url=herefoo.com?long_url=here/a/td CSS is: td.pan { overflow: hidden; width: 12em; } td.pan *:first-child { display: block; overflow: hidden; width: 12em; } So when the URL is extremely long, it wraps at the ? in the query_string. I tried replacing with something else x and it no longer wraps. So I tried entity encoding the question mark as #60; but it still wrapped instead of hiding the portion of the URL past 12ems. I also tried { white-space: nowrap; } on the td CSS rule, but that didn't do it either...again this is only IE7. -- Anthony Ettinger 408-656-2473 http://anthony.ettinger.name @pets = Pets.find_all_by_species('dog') @pets.each do |dog| { if dog.name == 'Farley' dog.nick = 'Sir Barks-A-lot' elsif dog.name == 'Bonita' dog.nick = 'Princess Boo' else dog.nick = 'Doggie?' end } __ 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] IE7 wraping URLs at the ? part...
On Dec 27, 2007 1:40 PM, Anthony Ettinger [EMAIL PROTECTED] wrote: I also tried { white-space: nowrap; } on the td CSS rule, but that didn't do it either...again this is only IE7. Adding it to both rules worked :) -- Anthony Ettinger 408-656-2473 http://anthony.ettinger.name @pets = Pets.find_all_by_species('dog') @pets.each do |dog| { if dog.name == 'Farley' dog.nick = 'Sir Barks-A-lot' elsif dog.name == 'Bonita' dog.nick = 'Princess Boo' else dog.nick = 'Doggie?' end } __ 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] absolutely positioning an a into a li IE6 7
Giuseppe Craparotta wrote: http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html To properly display the works links at the bottom-right of the li on IE6 you need to add /width:100%/ to the li itself . Of course I've also added /position:relative/ to the li to activate /position:absolute + top: x /and /left: y/ values given to the a . As a consequence of the presence of the width property, the li get separed when the page size is increased (ctrl + mouse wheel). Try adding position:relative to body. If the problem is caused by the IE7 'page zoom' and relative positioned elements [1], this should fix it. If you get rid of the absolute positioning method and position the works links simply by setting top and left margins then the want to tell you something more link gets covered (z-indexing doesn't do any good). This is what you get in IE6 and IE7: http://www.giuseppecraparottacv.co.uk/work-web-test-works.html In this case it seems that giving 'hasLayout' [2] to the li fixes the problem. I tried with li { zoom: 1 } (not used width:100% here since the li have horizontal padding.) Hope this helps a little, Bruno [1] http://brunildo.org/test/ie7_relzoom2.html [2] http://www.satzansatz.de/cssd/onhavinglayout.html -- Bruno Fassino http://www.brunildo.org/test __ 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] Fwd: Re: Table borders not working properly
Peter Mount [EMAIL PROTECTED] wrote: Steve LaBadie [EMAIL PROTECTED] wrote: I created a calendar with tables and all I want to do is control the borders for the table. When I apply CSS all of the tables on the page are being effected. I first surrounded the table with a div tag and then added a class attribute to the table, neither worked. Any suggestions would be appreciated. style type=text/css #calendar #table, td, th { border-color: #600; border-style: solid; } #calendar #table { border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; } #calendar td, th { margin: 0; padding: 4px; border-width: 1px 1px 0 0; background-color: #FFC; } /style Thanks __ 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/ Hi Try this: html head style type=text/css #calendar table, #calendar td, #calendar th { border-color: #600; border-style: solid; } #calendar #table { border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; } #calendar td, #calendar th { margin: 0; padding: 4px; border-width: 1px 1px 0 0; background-color: #FFC; } /style /head body div id=calendar table tr thhead 1/ththhead 2/th /tr tr tdCell 1/tdtdCell2/td /tr /table /div table tr thhead 1/ththhead 2/th /tr tr tdCell 1/tdtdCell2/td /tr /table /body /html Peter Mount Web Development for Business [EMAIL PROTECTED] http://www.petermount.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 - Sperling Vertical Menu
David Laakso wrote: Jehangir Larry wrote: Pls see www.nayanindore.com The menu works first time in IE6 (XP) and then freezes! Grateful for suggestions to make it work. Thanks. There is a reason why some of us try to avoid menus such as those. Isolate the menu (pull the menu from the page, and put it on another page all by itself). 1/ If you have the same problem with it isolated, go back to Sperling's original and start from scratch. 2/ If, when isolated, there is no problem, then there may be a js script (or css) conflict between the menu and the page it is in. Best, ~dL PS If all else fails, keep it simple: http://css.maxdesign.com.au/listamatic2/vertical02.htm Shall revert soon. Appreciate suggestion. Thanks. -- Best, JL Jehangir Larry __ 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 borders not working properly
On Dec 28, 2007, at 7:20 AM, Steve LaBadie wrote: I created a calendar with tables and all I want to do is control the borders for the table. When I apply CSS all of the tables on the page are being effected. I first surrounded the table with a div tag and then added a class attribute to the table, neither worked. Any suggestions would be appreciated. style type=text/css #calendar #table, td, th { border-color: #600; border-style: solid; } #calendar #table { border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse; } #calendar td, th { margin: 0; padding: 4px; border-width: 1px 1px 0 0; background-color: #FFC; } /style A live url with a sample of your code would be really useful to help with debuging. Meanwhile, a possible wild guess: Is the '#' in front of 'table' in your code snipped above a typo ? (iow, does your table have an ID of 'table'). Also, a selector like '#calendar td, th' means 'select a td that is a descendant of an element with ID '#calendar' and select all 'th' on the page'. You probably want something like this: #calendar td, #calendar th {} selectOracle is a nice tool that translates the meaning of selectors http://gallery.theopalgroup.com/selectoracle/ Philippe --- Philippe Wittenbergh http://emps.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] Div's not aligning right in IE7 [SOLVED]
Moxy (Tim?), Thank you for responding. I saw that Dave was struggling with his footer layout so I gave him my approach to layout design (without addressing his specific CSS) I appreciate you taking the time to give me your advice. It was helpful in getting me to rethink my approach. I've tidied up the footer area a little by removing some padding and margin specifications, and instead applying left and right properties to the text. This seems to work in IE7 and FireFox equally well. I believe I now have a working design, which I'll now attempt to tweak for efficiency. Many thanks to the list for it's ever present support. -- Dave M G Articlass - open source CMS http://articlass.org __ 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] page not working in IE 7 or Vista
first problem I have not been able to see my web page in vista or IE 7 although it works fine in I.E. 6. My present operating system is windows 2000. The doctype which I used was as follows. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; This is a part of my coding. link rel=stylesheet href=newindex.css style type=text/css / I put the page through the validator. There are a number of errors. One of them is as follows: Line 28, character 50: t href=newindex.css style type=text/css / Error: style is not a member of a group specified for any attribute Could someone please tell me what this means. second problem I changed the doctype to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN and I think that it is working in IE7 but maybe changing the doctype was not the right thing to do. I am fairly new at coding and would be very grateful for any help. Doreen Cowan http://home.cogeco.ca/~doreencowan/ __ 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] page not working in IE 7 or Vista
On 28-Dec-07, at 7:43 AM, Doreen Cowan wrote: This is a part of my coding. link rel=stylesheet href=newindex.css style type=text/css / Remove the 'style', so that it reads: link rel=stylesheet href=newindex.css type=text/css / I changed the doctype to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN and I think that it is working in IE7 but maybe changing the doctype was not the right thing to do. What is working in IE7? Using a Strict or an xHTML doctype should not give you a problem in IE7. I believe that it is good practice to use a Strict doctype as far as possible -- as this will alert you if you use deprecated HTML tags, etc. Best, - Rahul. __ 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] page not working in IE 7 or Vista
I suggest you go to this web site: http://www.w3schools.com/ Start with a Strict doctype (I prefer xhtml). Learn xhtml. Learn CSS. Use external files for CSS and JavaScript. Don't use font tags. I think the above will be helpful to you. Peter Mount Web Development for Business [EMAIL PROTECTED] http://www.petermount.com Doreen Cowan [EMAIL PROTECTED] wrote: first problem I have not been able to see my web page in vista or IE 7 although it works fine in I.E. 6. My present operating system is windows 2000. The doctype which I used was as follows. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; This is a part of my coding. link rel=stylesheet href=newindex.css style type=text/css / I put the page through the validator. There are a number of errors. One of them is as follows: Line 28, character 50: t href=newindex.css style type=text/css / Error: style is not a member of a group specified for any attribute Could someone please tell me what this means. second problem I changed the doctype to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN and I think that it is working in IE7 but maybe changing the doctype was not the right thing to do. I am fairly new at coding and would be very grateful for any help. Doreen Cowan http://home.cogeco.ca/~doreencowan/ __ 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-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/