[css-d] Rounded corners problem on Mac OSX FF
Hi list,
I don't have access to a Mac to debug this myself, I was wondering if
someone on the list might be able to explain what was happening here?
http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html
I'm told that on the rounded corner in the bottom right of the large white
text box is being interfered with by what appears to be a white border
stretching down.
I'm not seeing that problem on Win XP, FF1.5, IE5, IE5.5 or IE6 - they all
show the page fine.
Here's the CSS that I think is relevant - but of course I'm not sure what's
actually causing this problem so it could be anything I guess..
#text_block_wrapper_1 {
float: left;
margin:0px;
padding:0px;
width: 260px;
background: transparent url(images/text_block_middle.gif) left top
repeat-y;
}
#text_block_wrapper_2 {
float: left;
margin:0px;
padding:0px;
width: 260px;
background: transparent url(images/text_block_top.gif) left top no-repeat;
}
#text_block {
float: left;
margin:0px;
padding:12px;
padding-top:16px;
padding-bottom:16px;
font-size: 0.8em;
background: transparent url(images/text_block_bottom.gif) left bottom
no-repeat;
}
#text_block p {
margin:0px;
padding:0px;
margin-bottom: 0.8em;
}
As you can see I've achieved the rounded corners by having a fixed width
column defined by 3 nested DIVS - the lowest div has a background of 260 x 1
px gif to define the sides of the column, then the next DIV has a bg image
of the top of the rounded corner rectangle, and the last one holds the
bottom image of the block.
Thanks for any help,
Dan.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Rounded corners problem on Mac OSX FF
From: francky [EMAIL PROTECTED] Hi Dan, I can see the problem in IE6 on Win(98SE) too: screenshot-1 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-1.png. and in FF1.07 on pc: screenshot-2 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-2.png It is not a white border, but the inside image of the box peeping through, as can be seen by canceling the text_block_middle.gif screenshot-3 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-3.png. Seems to be the floating of the inside wrappers (which you don't need): screenshot-4 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-4.png. Greetings, francky Hi Francky - thanks for the help and those screenshots, that's great. I managed to reproduce the error here which is always a good start to debugging, and then removed the float:left; on the text_block. I've ironed out a few other problems that crept in but I think now it's working fine. http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html Tell me if it isn't? btw: other technique for rounded corners, just to compare: liquidcorners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. Very good - it looks very thorough. I prefer to try to tailor the solution to the problem rather than attempt a jack of all trades myself - but it's all good. Oh, and I've just seen your mail with your example with my graphics :-) very generous of you to spend that time. **Can I ask you though that you replace that text with some Lorem Ipsum? ** I've got myself into trouble using this list with live content before when it got indexed by Google and my test page came up in searches along with the real site URL - the client wasn't happy. Yes, I shouldn't have used live content this time either... but I'll be removing these pages once I'm happy they work. Thanks to the others who commented and/or helped too! Cheers, Dan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Disappearing nav image - FIXED
Ok so this didn't turn out to be an CSS problem after all, but I've already posted the problem here, and it certainly _looked_ like a CSS problem at first, so here's what it was: Norton Ad Blocker on the client's machine (and perhaps some other Net Nanny type progs do the same) was removing the entire IMG tag from my source before it got to the user's browser - hence the disappearing image. There are probably many things Norton may look for in an image, but in my case it was the image dimensions - to fix it I just made the image 1px wider. I hope this helps anyone else who may find that images vanish from their websites for no apparent reason. Thanks to Charles Dort for his help testing this. - Original Message - From: Dan Searle [EMAIL PROTECTED] To: css-discuss css-d@lists.css-discuss.org Sent: Wednesday, November 09, 2005 6:16 PM Subject: [css-d] Disappearing nav image OK Charles Dort has shown me that my nav image disappears both in Firefox and IE6, and also on a normal screen, not just widescreens. (See my other thread: IE6, Widescreens and vanishing images). So I guess I need to look for another reason why the right most nav item disappears for some users - I can't get it to happen here though. Does it disappear for anyone else? www ichameleon-dev6 co uk/page/en/312/0/5/what+we+have+learned.html (Sorry you'll have to rebuild the URL yourselves) This is a screen shot to compare - here the nav item has vanished - http://www.danwasthere.com/screenshots/esf_screenshot_2.jpg Does anyone know what might cause this? And even better - how I might try to fix it? It's a bit tough to track down when it works for me! Cheers, Dan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6, Widescreens and vanishing images
Apparently when my site is viewed on a widescreen PC using IE6, the right most nav item (Where next?) vanishes from the display. It's not that the image doesn't load - it just isn't there at all. www ichameleon-dev6 co uk/page/en/312/0/5/what+we+have+learned.html (Sorry you'll have to rebuild the URL yourselves) I don't have a widescreen to test, but I have been sent this screen shot of what happens: http://www.danwasthere.com/screenshots/esf_screenshot_2.jpg as you can see - it's not there. The extra whitespace in the header is there because I was trying to see if the button had just been knocked down to the next line - but that doesn't seem to be the case. Does anyone have a widescreen they can test this on? The problem is only in WinXP / IE6 I believe. Also - does anyone know of what I could do in the CSS to fix it? If anyone wants more info on this IE issue, here's some further reading: http://www.lealea.net/blog/comments/web-dev-problem-win-ie-on-widescreen/ http://blogs.msdn.com/tonyschr/archive/2004/03/23/94391.aspx http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/highdpi.asp#highDPI_solution I have tried to recreate the situation by changing my DPI, and adding the registry key that is mentioned, but all that achieved was to make the images look crappy - the links were all there though. Thanks in advance, Dan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Disappearing nav image
OK Charles Dort has shown me that my nav image disappears both in Firefox and IE6, and also on a normal screen, not just widescreens. (See my other thread: IE6, Widescreens and vanishing images). So I guess I need to look for another reason why the right most nav item disappears for some users - I can't get it to happen here though. Does it disappear for anyone else? www ichameleon-dev6 co uk/page/en/312/0/5/what+we+have+learned.html (Sorry you'll have to rebuild the URL yourselves) This is a screen shot to compare - here the nav item has vanished - http://www.danwasthere.com/screenshots/esf_screenshot_2.jpg Does anyone know what might cause this? And even better - how I might try to fix it? It's a bit tough to track down when it works for me! Cheers, Dan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logical expressions
Kenoli Oleari said... For instance, suppose I was creating content to go into a div by retrieving it from a database using some server side code like php. This would cause the div to expand to accommodate the data. Then suppose I had another div next to it that I wanted to have the same height. I can't tell it how high I want it to be because this will be variable depending on the size of the first div. I'd like to say set the height the same as the first div or make the bottom of this div the same as the first div. I don't know what your design is, so maybe this won't work for you, but perhaps you could rethink the problem and attack it from a different angle: don't try to make both columns be the same height, but just make them _look_ like they're the same height: http://www.alistapart.com/articles/fauxcolumns/ Cheers, Dan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CAN ANYONE HELP ME?: Display of image causes the following div's top margin to disappear in Firefox
Hi Charles, In Win/FF I can see a black line under the tabs? Not sure what's missing. I can see that there still isn't enough space between the top of the main text and the nav though - Try putting a height on the #header? Sorry I can't help anymore, got too much to do - hopefully you'll crack it yourself now, or someone else can pick it up. Good luck! Dan. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
