Jump to content

PicnicTutorials

Advanced Member
  • Posts

    1,108
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by PicnicTutorials

  1. 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

  2. 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....

  3. I've done just a couple of these however, I am not totally certain if this works but try changing the 'type' : 'iframe', to be ajax instead.

     

    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.

  4. 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!

  5. 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.

  6. 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

  7. 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.

  8. 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!

  9. Give this a whirl...

     

    li {

    background: #fff;

    border-bottom: 1px solid #000;

    }

    span {

    position: relative;

    bottom: -1px;

    background:#fff;

    padding-right: 5px;

    }

     

     

    ======================

     

    <ul>

    <li><span>Do you have any openings?</span></li>

    </ul>

     

    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

  10. 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

  11. Hmm..assuming you want to keep the <li> at a certain width or 100% width, you could try applying a span tag right after the text and set it to be width 100% with border-bottom.

     

    <li>Do you have any openings? <span></span></li>

     

    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.

  12. 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!

  13. 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.

  14. 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.

  15. 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...

  16. 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!

  17. 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!

  18. 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.

×
×
  • Create New...