[css-d] external link icon in right to left pages does not float to right
if you look here : http://test3.dekkers.net/ you can see the icon lies under the link, as soon as i remove the dir=rtl from the html tag - all works. this is all the code : !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; html dir=rtl xml:lang=he xmlns=http://www.w3.org/1999/xhtml; headtitle Untitled Page /title style type=text/css a[href^=http:] { padding-right:10px; background:url(/images/externalLink.gif) no-repeat right top; } /style /head body div a href=http://www.imagine-design.co.il;Imagine/a /div /body /html any suggestions ? Thanks Ido __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] external link icon in right to left pages does not float to right
if you look here : http://test3.dekkers.net/ you can see the icon lies under the link, as soon as i remove the dir=rtl from the html tag - all works. this is all the code : The problem is that links are inline elements and this type can not have padding. if you want to apply this property to a inline element you have to use other properties (for example, display: block or float: right): a[href^=http:] { float: right; padding-right:10px; background:url(/images/externalLink.gif) no-repeat right top; } __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS compliant marquee alternative
I'm using .net to create content for a new ticker. is there a good way to make it move ? i don't want to use a marquee and looking for a good and valid alternative. Thanks Ido __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Lists in browsers
Hi all, I'm just starting out with sites using only css and have come across the following problem. The code below renders OK in IE7 with the li elements hard against the left margin of the page, but in Firefox 2.0 and Opera 9.2 I get a space of around 40px on the left. What's going on? I would have thought that the display in IE7 is correct, so why are Firefox and Opera wrong? !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head style type=text/css !-- body { margin: 0px; padding: 0px; } #mainNav ul { margin: 0px; font-size: .8em; list-style-type: none; } #mainNav ul li { padding: 5px; } #mainNav a { color: #fff; display: block; background-color: #dc332a; padding: 0.2em; line-height: 1.4em; text-align: center; border: 1px solid #000; width: 12em; text-decoration: none; } #mainNav a:hover { color: #000; background-color: #baef19; } -- /style /head body div id=mainNav ul lia href=page1.htmlPage 1/a/li lia href=page2.htmlPage 2/a/li lia href=page3.htmlPage 3/a/li lia href=page4.htmlPage 4/a/li lia href=page5.htmlPage 5/a/li lia href=page6.htmlPage 6/a/li lia href=page7.htmlPage 7/a/li /ul /div /body /html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] external link icon in right to left pages does not float to right
On Nov 19, 2006, at 6:05 PM, Ido dekkers wrote: if you look here : http://test3.dekkers.net/ you can see the icon lies under the link, as soon as i remove the dir=rtl from the html tag - all works. You don't say in which browser... Safari 2.04 works (icon to the right of the word). Firefox 2.0 is nearly right, the icon is on top of the last letter (e), as if it the padding is ignored. That is, iirc, a filed bug with RTL text, bug that is fixed in recent nightly builds. Opera 9: displays the icon to the left of the word. From my understanding with RTL text/inline boxes, this is incorrect as well. I could be wrong. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Lists in browsers
On Sun, 19 Nov 2006 19:16:30 +0800, Trevor Richens [EMAIL PROTECTED] wrote: The code below renders OK in IE7 with the li elements hard against the left margin of the page, but in Firefox 2.0 and Opera 9.2 I get aspace of around 40px on the left. What's going on? I would have thought that the display in IE7 iscorrect, so why are Firefox and Opera wrong? They're not doing anything wrong. They just use padding rather than margin. Add padding:0 to your #mainNav ul styles. HTH, -- Andrew Gregory, URL: mailto:[EMAIL PROTECTED] URL: http://www.scss.com.au/family/andrew/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Lists in browsers
On Nov 19, 2006, at 8:16 PM, Trevor Richens wrote: I'm just starting out with sites using only css and have come across the following problem. The code below renders OK in IE7 with the li elements hard against the left margin of the page, but in Firefox 2.0 and Opera 9.2 I get a space of around 40px on the left. What's going on? I would have thought that the display in IE7 is correct, so why are Firefox and Opera wrong? Nobody is wrong. Opera, Safari and Firefox use padding-left for space reserved for the list marker. Reset both the margin-left and padding-left to zero. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] external link icon in right to left pages does not float to right
On Nov 19, 2006, at 9:35 PM, Philippe Wittenbergh wrote: On Nov 19, 2006, at 6:05 PM, Ido dekkers wrote: if you look here : http://test3.dekkers.net/ you can see the icon lies under the link, as soon as i remove the dir=rtl from the html tag - all works. You don't say in which browser... Safari 2.04 works (icon to the right of the word). Firefox 2.0 is nearly right, the icon is on top of the last letter (e), as if it the padding is ignored. That is, iirc, a filed bug with RTL text, bug that is fixed in recent nightly builds. Opera 9: displays the icon to the left of the word. From my understanding with RTL text/inline boxes, this is incorrect as well. I could be wrong. And if I use Hebrew characters for the text (as opposed to Roman characters in your testcase), then Firefox and Safari are unchanged but Opera puts the image on the right, on top of the last character. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Small glitch in Safari
I'm currently at a disadvantage here, since normally I work from my own little setup at home, where I have access to all kinds of browsers and platforms to work from. However, I'm on vacation (ha!) and am sitting in my parent's dining room, a good 14 hour drive from my awesome setup in my office. The only thing I could bring with me was my little iBook and a couple of disks that are necessary to finish a site that needs to be live by Thursday. I've never actually coded from my Mac before, so this in a new (and eye-opening) experience. As an aside, if anyone could tell me the best browser I should be using for my coding base (I normally use Firefox on my PC), I'd appreciate it. I currently have Safari 2.0, Firefox 1.5, IE 5.2 and Camino 1.0.3 installed here. Anyway, my weird issue is this - I'm currently using Safari, and I'm coming across a problem I've never encountered before. I don't recall seeing this issue on my PC (I did manage to check it on Firefox and IE7, IE6, IE5.5 and IE 5.1 before I had to leave) - so I'm thinking maybe it's a Mac issue - but I haven't had a chance to check it on my other Mac browsers yet (so it could just be a Safari issue) - and I was wondering if anyone has ever encountered this before. I have a list item link that's doing something funny. I'm coding a ZenCart, and because of the way ZenCart is set up, I had to do some creative coding to get a list separation (I needed the *one* list to look like two different lists). Because of this, I had to set a couple of overrides for the secondary list. So, the issue I'm having is that the a:first-letter is *normally* set to 1.3em, but since I had to reset the secondary one, I had to change it to a:first-letter:1em to get it right. Now that I've done that, my a link hover color does not function on the first letter of the link. The rest of the link text changes color like it should, but the first letter does not. Is this some kind of bug, or is it just because of the weird code I had to put in to get it to look like it should? If it's the former, and it's Safari only, I think we can deal. But if it's the latter, I'd love to know how to fix it. Unfortunately, I don't have permission to post the working site on a public list - but I can post the code in question. If you'd like to *see* it, you can email me offlist and I can pass it along that way. So, the code is as such: HTML (heavily edited - don't want to take up too much space, so I gave you enough to get the idea!): ul class=level1 li class=submenu8a href=#Greece/a ul class=level2 lia href=#People/a/li lia href=#Scenics/a/li /ul /li !-- This is the part where it needs to start looking like a separate list -- li class=submenu12a href=#Other Products/a ul class=level2 !-- This is the link that's acting funny - the T in test is not changing color on hover -- lia href=#test/a/li /ul /li /ul CSS: ul.level1 { margin-bottom:15px; } ul.level1 li { border-top:1px solid #BBB; padding:5px 0; } ul.level2 { margin:5px 0 0 25px; font-style:italic; display:none; } ul.level2 li, ul.level2 li a{ border:none; } ul.level2 li { border-bottom:none; list-style-type:disc; color:#147193; padding:0; } body#category8 li.submenu8 ul.level2, body#category12 li.submenu12 ul.level2 { display:block; } /* Category 12 stuff here */ ul.level1 li.submenu12 { border-top:none; padding:20px 0 0 0; } ul.level1 li.submenu12 a { display:block; color:#888; font-size:0.8em; font-weight:bold; text-transform:uppercase; padding-bottom:0; margin-bottom:2px; letter-spacing:2px; border-bottom:none; } ul.level1 li.submenu12 a:first-letter { font-size:1.3em; } ul.level1 li.submenu12 ul.level2 { margin:0; font-style:normal; display:none; } #sideBoxContent ul.level1 li.submenu12 ul.level2 { display:block; } ul.level1 li.submenu12 ul.level2 li { border-bottom:none; background:transparent; list-style:none; color:#147193; padding:0; } ul.level1 li.submenu12 ul.level2 li a, ul.level1 li.submenu12 ul.level2 li a:link, ul.level1 li.submenu12 ul.level2 li a:visited { color:#147193; font-weight:normal; text-transform:none; background-image:none; letter-spacing:0; font-size:1em; padding:5px 0; border-top:1px solid #BBB; margin-top:2px; } ul.level1 li.submenu12 ul.level2 li a:hover, ul.level1 li.submenu12 ul.level2 li a:active { color:#2FA190; } ul.level1 li.submenu12 ul.level2 li a:first-letter { font-size:1em; text-transform:uppercase; } sorry for the novel - I swear, if I were home, it'd be shorter - but I'd appreciate any insight! ~Shelly __ css-discuss [EMAIL
[css-d] ie :: border of an image with padding in quirks
Stuck. How do I get the red border to show up with an image that has padding in ie when she is in quirksmode (I know the answer to this question. I wish I could remember what it is.). Please see: http://www.chelseacreekstudio.com/ca/cssd/border-test.html Thanks, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Shadows without images
Hey guys, Thought you might want to check this out. This guy has made shadows without using images. It uses a pretty good number of divs, but it still looks pretty good. I wonder, would this method be faster or slower than using images? I mean after all, the browser does have to create the space and then fill with it with the correct color. Either way, here's the link (and yes it was on digg): http://www.webtoolkit.info/css-drop-shadow.html Enjoy, Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Shadows without images
From: Martin Davis Thought you might want to check this out. This guy has made shadows without using images. It uses a pretty good number of divs, but it still looks pretty good. I wonder, would this method be faster or slower than using images? I mean after all, the browser does have to create the space and then fill with it with the correct color. Either way, here's the link (and yes it was on digg): http://www.webtoolkit.info/css-drop-shadow.html It should be plenty fast, but you'd have to benchmark it to be sure. I noticed a couple of problems right away: 1) The code uses the same id= attribute on multiple elements. This needs to be a class= instead. 2) It uses only half as many divs as it needs. The two-pixel stairstepping is just a bit too visible. It should offset the divs by one pixel instead of two for a smoother shadow. -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Shadows without images
More demos of css-shadows: http://www.cssplay.co.uk/menu/shadow.html http://www.cssplay.co.uk/menu/shadow2.html http://www.cssplay.co.uk/menu/shadow_boxing.html On 11/19/06, Martin Davis [EMAIL PROTECTED] wrote: http://www.webtoolkit.info/css-drop-shadow.html Enjoy, Martin __ css-discuss [EMAIL PROTECTED] ] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout help
Hello there. I'm having a hard time coding my CSS to position divs exactly the way I want it to. Could someone help me out and let me know where I'm going wrong, i do not know what positioning method I should use. How i want the website to look : http://img212.imageshack.us/img212/7094/compolf6http://img212.imageshack.us/img212/7094/compolf6.gif .gif CSS coding : #container {width: 600px; height: 100%; background:url(images/wallpaper.png) no-repeat bottom left; color:#FF; position:relative; } #banner { width: 500px; height: 110px; background:url(images/banner.png) no-repeat; } #navbar { background:url(images/horizontalbar.png) no-repeat; height: 41px; } #leftbox{ width:225px;} #rightbox{ width:250px; background:url(images/rightbox.png); height:156px;} HTML coding body div id=container div id=banner Banner/div div id=navbar/div div id=leftbox Leftbox/div div id=rightbox Rightbox/div /div /body -- nouhad __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Shadows without images
On Nov 19, 2006, Martin Davis wrote: Hey guys, Thought you might want to check this out. This guy has made shadows without using images. It uses a pretty good number of divs, but it still looks pretty good. I wonder, would this method be faster or slower than using images? I mean after all, the browser does have to create the space and then fill with it with the correct color. Either way, here's the link (and yes it was on digg): http://www.webtoolkit.info/css-drop-shadow.html I think it looks very good :) It could be used around tables (i.e. actual use of tables to present data of course) very effectively I suspect. I think I'm going to try this out. -- Patrick http://www.patrickjames.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help
nouhad wrote: Hello there. I'm having a hard time coding my CSS to position divs exactly the way I want it to. Could someone help me out and let me know where I'm going wrong, i do not know what positioning method I should use. How i want the website to look : http://img212.imageshack.us/img212/7094/compolf6http://img212.imageshack.us/img212/7094/compolf6.gif .gif [code trimmed] I think that you could float the right and left boxes and then clear them. I am not exactly sure what you want to wind up with, but maybe this will help to get it started: CSS body {font-family: sans-serif;background-color: #fff; color: #000;text-align: center; } p {margin: 0;} #container {border: 1px solid red;width: 600px;margin: 0 auto;height: auto;} #banner {background-color: fuchsia;width: 500px;height: 110px;margin: 0 auto;} #navbar {background-color: green;height: 41px;} #leftbox {background-color:blue;float:left; margin-left: 50px;width:225px;} #rightbox {float: right; margin-right: 50px;width:250px; background-color: red;height:156px;} br.both { clear: both;} HTML div id=container div id=bannerpBanner/p/div div id=navbarpNavbar/p/div div id=rightboxpRightbox/p/div!--note the right box is first in the source order-- div id=leftboxpLeftbox/p/div br class=both /!-- clear the floats-- Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout help
~davidLaakso wrote: nouhad wrote: Hello there. I'm having a hard time coding my CSS to position divs exactly the way I want it to. Could someone help me out and let me know where I'm going wrong, i do not know what positioning method I should use. How i want the website to look : http://img212.imageshack.us/img212/7094/compolf6http://img212.imageshack.us/img212/7094/compolf6.gif .gif [trimmed] Oops. The HTML should read: div id=container div id=bannerpBanner/p/div div id=navbarpNavbar/p/div div id=rightboxpRightbox/p/div div id=leftboxpLeftbox/p/div br class=both /!-- clear the floats-- /div -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Peekaboo bug in header - can't find solution
Have a look at http://03.infocopa.com/ . In Internet Explorer (I tested with IE6), if you resize the window vertically, poof -- the purple area of the header disappears. The HTML validates, CSS 2.1 validates, and I have ensured that hasLayout is true for div#logo-area and _all_ its descendents. I don't know how else to prevent this from happening in IE. (All's fine in Firefox.) The site is slated to go live within the week, and having this problem right on the header is a real show-stopper. Thanks for your help! Charles __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Lists in browsers
On Sun, 19 Nov 2006 21:38:12 +0900, you wrote: Nobody is wrong. Opera, Safari and Firefox use padding-left for space reserved for the list marker. Reset both the margin-left and padding-left to zero. Thanks guys. It's obvious when you know how. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peekaboo bug in header - can't find solution
Charles Blaquière wrote: Have a look at http://03.infocopa.com/ . In Internet Explorer (I tested with IE6), if you resize the window vertically, poof -- the purple area of the header disappears. The HTML validates, CSS 2.1 validates, and I have ensured that hasLayout is true for div#logo-area and _all_ its descendents. But not its ancestor, #wrapper-main. It is positioned relatively, but has no layout. This is insufficient for containing in IE6. Disappearance often occurs in such a constellation. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] web directories
I want to find some web directories on the net. But i cannot their technologies how to get so much that knowledge in the sites. some of them are: www.click2info.net www.open-sites.net www.directoryofmusic.net www.getindirectory.com Sponsored Link Mortgage rates near 39yr lows. $420k for $1,399/mo. Calculate new payment! www.LowerMyBills.com/lre __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unexpected padding with IE6 and IE7
Dear Georg, http://www.zap.org.au/~john/web/test-css/test.html The problem is that the word Subheader is displayed with additional padding under IE6/IE7, as if a padding-top: 0.75em appeared somewhere. It's a version of IE's old whitespace bug. Thanks; I was reasonably sure someone had come across something like this before; I just couldn't find anything useful when I searched for my specific problem. On the whole, I think the solution I discovered (as shown in http://www.zap.org.au/~john/web/test-css/test-working.html) seems less problematic: it works in all browsers and looks cleaner as a solution. Thanks once again. Yours truly, John Zaitseff -- John Zaitseff,--_|\The ZAP Group Phone: +61 2 9643 7737 / \ Sydney, Australia E-mail: [EMAIL PROTECTED] \_,--._* http://www.zap.org.au/ v __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/