PicnicTutorials

I have completed my master css page. I'm transferring my site from tables to css and my IE6 (via IE tester) gives me an error message 50% of the time and wont load the page. Can you please test on yours or better yet a native IE6? Thanks for looking! It's one of three things. 1) PIE.htc 2) too big of page in combo with PIE.htc 3) or my IE tester is thowing fits. Test page... http://goo.gl/DEbPO PS. Thats by far my biggest page load in the site. It has 100 images in that photo gallery. The other pages load more snappy.

Pagelime CMS even has an iPhone app. I could make edits right on my phone.

No I didn't forget. I got side tracked. I'll look tomorrow morning. I'm not very good with js but maybe I can think of something.

Yeah that one. Yeah check out PIE.htc. It's a small htc file feed to ie and it enables css3 border radius, shadow, and gradient in ie and looks perfect. Aside from images I think that may be my best option. But I think I want the shadow too which gets very complicated with images so css3 it probably is. and I just read that ie9 will support css3 rounded corners so it's only ie8>. that's less than right - ha ha

I'm finally going to convert that site I'm always apologizing for (the table mess) over to css/divs. It's a pretty big site so it should take me awhile. But it will keep me busy and should be fun. I'm going to use PIE.htc and css3 to make the rounded corner of the main container div unless someone knows of a better option. I guess I could use images too? Hmmm....

none here in same version

Not sure if I had to add something else as well but I changed it to type ajax but then nothing would even load? I've been at this for a few days now. There has to be a way to do this. Fancybox has a resize() event thingy but I don't think that works with iframe. I don't mind manually changing the size because there are only two sizes I need it to be. Small and large. Any ideas welcome.

Here is a stripped down test page with absolute paths so its easy to test out possible solutions. http://goo.gl/oQ2b9 Click the red house. When fancybox opens I want it around width 700 height 575. Then when you click the "LARGER" link Im hoping to find a way to make it resize to width 800 height 675. Currently it does not resize it just gains scrollbars. Thanks for your help!

Hi guys, thanks for the tests! yeah the way I understand it is. If the child does not have a font declared it will inherit the parent. If the child does have a font declared and the font is unavailable it will no longer look back to the parent (ie will not be inherited) and will default to initial value of sans serif. Which is stupid. Now I get to go back and put back all the fonts - yeah.

Ok I found it... "While an element’s font-family value will be inherited if it’s not explicitly specified, if it is specified, and none of the specified font families match an available font (this case only arises if the list doesn’t include a generic family name), the resulting property value will default to the user agent’s initial value, not the value inherited from the parent element, as you might expect." http://reference.sitepoint.com/css/font-family So no it does not cascade to the parent. Which is lame

Thanks Wickham! Due to you were'nt quite positive either I posted the same question over here. http://www.sitepoint.com/forums/showthread.php?t=726593 This guy actually said no it does not cascade. But I don't believe him yet. Is there any way to test this aside from removing the font from your computer? I read the w3c but could not find it mentioned. And googled a bit. One other thread answers yes it did cascade but with no proof either. I'm looking for a conclusive yes or no ya know.

Hi, now I'm tiding up the css. If say the body has font-family:Arial, Helvetica, sans-serif;. And the h1 has font-family:Verdana;. In cases where there is no Verdana on the users computer will it then go in the order that I have listed for the body? Or - do you have to list all the fonts for each element listed? I presume not but I've never actually known this answer. Thanks!

Thats perfect Eddie! Good idea. Aside from one small detail. For some reason I had to go all the way down to bottom -3px to hide the border. And then the bullets dont line up anymore. And the span looses its grip on the border after one text size increase. Thats probably line height causing that though. So I'll keep working on it... EDIT: yep line-height 1 seems to fix both issues. Perfect it looks like you found the perfect solution. Thank you very much Eddie! EDIT 2: wow. in FX at least with line-height 1 all I need is background #fff on the span. PR and top 1px was not needed. padding right I will need though

I could display block the text and give it background white height 100% and a higher z. Then AP the border width 100%. The border would slide under the text but you wouldn't see it. That is one solution but a bit to involved for my liking but a solid backup..

Ok the border idea is good but I need it to be on the same line as the text and not to drop below it even if text size is increased. The line is close to the text and the two take up all of the li width so there is not much wiggle room for alt text size. So I need a way to tile that border (or image) without it breaking to the next line. Here is the page I'm working on to get an idea http://goo.gl/EquNm

Border! Why didn't I think of that? That's a good and simple idea I will try that asap. Thanks Eddie! And yes the li is width 100% of it's containing block.

Hello, Cleaning up my site. Currently pages like these are broke in mobiles because the non-breaking spaces blow out the layout. So I'm getting rid of them all. I've done a few other pages with float instead but I dont think thats the right take with this. Here is what I'm faced with... <li>Do you have any openings? _____________________________________________________<br> <br> </li> Obviuosly remove the brs. The text has to be left aligned and the long line has to be right aligned. This is all contained in a fixed width layout. If the text is enlarged I would prefer that it doesnt break to the next line. What do you think is the best approach? I could float them but that would break to the next line. I could inline-block it. What I'd like to do is tile an image of the line. That way it just stretches to fit. But the line and the text need to be on the same line. So the tiled image holder would need to be block (or inline-block). Like I said just brain storming. I havent had a chance to test anything yet but I'll have to with this. Thanks!

Thanks BeeDev. But I just ended up hiding the images with AP and margin-top -999em and that made Opera happy. For some reason margin-left was leaving a large space in a couple browsers. Strange because it shouldn't have. I think it was something to do with the image inside the div. But still shouldn't since it's AP.

Good god! That was way too hard. OK I figured it. And ended up doing it with with out writing one extra css rule. Just nested another table instead. Andrea, if you care to look, here it is finished. http://goo.gl/QNxzZ Thank again Andrea, I would never of figured it with out your direction. I was way to focused on moving the form down. For some reason it never occured to me as an option to move the google stuff up.

I was crossing my fingers but it didnt help. Works perfect in everything but IE6/7. IE6/7 are giving the h1 (Contact Us) another 20px of top margin. I cant seem to find out where that is coming from. Unless its eluding me its not coming from css. Looks like its coming from the td something or other. I could of course feed IE a different rule but thats a sloppy last resort type of thing. Thanks! Here is my test page. http://goo.gl/4xHAL PS. At Sitepoint I had this thread going to but there seemed to be no easy fix. Here is what I was told... "With tables and forms either the form needs to wrap around the entire table OR a td within the table needs to wrap around the entire form. Nothing in between is valid." So the only other way (other than what Andrea figured) was to get rid of all the td's and combine it all to one. Then wrap the td around the form. I mine as well recode it all to css if I was to do that. So it seems Andreas fix is the best solution for now. So just IE6/7 to fix...

Thank you very much Andrea! I was having a hard time getting anybody to touch that mess. I will work on that Tommorrow morning and let you know how I get along. Happy New Years!

I need help validly moving this form tag? http://goo.gl/QNxzZ Some day I'll get around to moving this site all over to div/css but for now I'm stuck with this incomprehensible nested table mess. I simply need to move the form so the google search's form and addthis form is not nested inside it. My validation wont correctly work with it so. I just want to move the form tag down below the google search. But I cant seem to make it happen validly. I'm a bit lost in that mess. Whats the simple solution for a trained table eye? Thanks!

Thanks that's good. Yeah there are about 120 images to load in that page. I should prob trim that some.

O-My-God! Im going crazy. Another whole morning working on this. Fixed Opera, IE7, and IE6 problems. Now My IE6 wont show the images. Just shows a white box. Can you please check in your ie6 and tell me what you see? Click on some of the blue links in the text. They should show an image. In mine its totally random which leads me to think maybe its my ietester. Plus mine works fine locally. Only live its broke. Thanks! Is this working in your IE6? http://goo.gl/2iBtI Edit: o thank god. should of done this first. I just updated my ietester and that seems to make all work perfect. Still... a confirmation from one other would be reassuring. Thanks!

Omg. I am still working on this plugin! I had all the bugs worked out locally then when I went live opera and ie6/7 were badly broke. Ie won't e en load the page and opera shows each image 1/10th the correct size. But only on the first click. Second click is fine. Worked all morning (again!) narrowing down the problems. Opera can't do the CSS display none on the popup image. So margin-left:-999em seems to fix that. That was of course the last thing I thought it was. In ie the problem lies with the Disqus comment plugin. Does not work with this plugin and ie just aborts page load. Getting close to a month on this stupid thing! Arg. My only question. Were in this script is it feeding display none to the zoomed in image? Cause display none in the CSS is only for js off. It's being feed it twice and that may be operas problem. If you think dif please tell. Thanks! Edit: just found it. It's in the script HTML inline CSS. Still... Do you see any reason why opera would puke when using display none to hide the image before the script calls it??? The authors plugin does not suffer from this problem because he only relies on the js driven display none.