SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jiggling type after slide show transition in Firefox 4

    Hello all,

    Have this interesting but pain in the butt bug on this page in Firefox 4:

    http://test1.chuprinastudios.com/test.php

    In Firefox 4(OSX 10.6.5) please note the type beneath the slideshow, upon a image transition there seems to be a bit of a jump in the type. In Firefox 3.6.1x(OSX 10.6.5)the jump/wobble does not appear to be there. The results seem to be the same in Windows 7. In Chrome it does not have the issue.

    I have tried separating the slide show by another div, rotating the image in Photoshop and not in css. Nothing seems to work so far.

    Any reason why Firefox 4.0 would only be doing this? Any advice, reasons, work arounds, direction, answers would be greatly appreciated.

    PChuprina

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    When does the jump occur?

    I didn't see a transition taking place.

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, if you remove the slideshow div, the problem disappears.

    I see some dotted lines too, beside the blurry rendering of the text.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry i didn't make myself clear.

    I meant the image transitions in the slide show. The descriptive text underneath jumps just a bit and settles back during the image fade in and outs.

    PChuprina

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    noonnope: The slideshow div actually contains the slideshow........

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok, I see small movement in the text below the transition now.

    I've only tested using Firebug but it seems the jump stops if you remove the transition from the body_content element and apply it to individual elements instead.

    e.g.
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    /*CSS *libraries**/
    @import url("reset.css");
     @font-face {
     font-family: 'ArchitectsDaughterRegular';
     src: url('../fonts/architectsdaughter-webfont.eot');
     src: url('../fonts/architectsdaughter-webfont.eot?iefix') format('eot'),  url('../fonts/architectsdaughter-webfont.woff') format('woff'),  url('../fonts/architectsdaughter-webfont.ttf') format('truetype'),  url('../fonts/architectsdaughter-webfont.svg#webfont3LMaigq5') format('svg');
     font-weight: normal;
     font-style: normal;
    }
    body {
        background-color: #000;
    }
    #main {
        /* The main container */
        background-image:  url(../images/bkgrd2.jpg);
        background-repeat:no-repeat;
        background-position:  center;
        margin:  auto;
        margin-top:   0px;
        width:1240px;
        height:1000px;
        position:  relative;
        z-index: 100;
    }
    .title {
        width:  781px;
        height:  117px;
        margin-left:  131px;
        padding-top:  65px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    div#body_content {
        /*border:  solid red 1px;*/
        height: 577px;
        width:  950px;
        margin-top:  -5px;
        margin-left:  130px;
    }
    .nav {
        float:  left;
        width:  233px;
        height:  450px;
        margin-top:  -325px;
        margin-left:  38px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    .navb {
        float:  left;
        width:  233px;
        height:  450px;
        margin-top:  16px;
        margin-left:  30px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    .nav ul li, .navb ul li {
        list-style:  none;
    }
    #homeb, #web_designb, #photographyb, #blogb, #print_storeb, #client_servicesb, #contactb, #aboutb, #resumeb {
        display: block;
        width: 210px;
        height: 30px;
        margin-top:  10px;
        margin-left:  -16px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    /*everyday items about button hover*/
    #homeb:hover, #web_designb:hover, #photographyb:hover, #blogb:hover, #print_storeb:hover, #client_servicesb:hover, #contactb:hover, #aboutb:hover, #resumeb:hover {
        background-position: 0 -30px;
    }
    #homeb {
        background: url(../images/homeb.png) no-repeat;
    }
    #web_designb {
        background: url(../images/web_desb.png) no-repeat;
    }
    #photographyb {
        background: url(../images/photographyb.png) no-repeat;
    }
    #blogb {
        background: url(../images/blogb.png) no-repeat;
    }
    #print_storeb {
        background: url(../images/print_storeb.png) no-repeat;
    }
    #client_servicesb {
        background: url(../images/client_servicesb.png) no-repeat;
    }
    #contactb {
        background: url(../images/contactb.png) no-repeat;
    }
    #aboutb {
        background: url(../images/aboutb.png) no-repeat;
    }
    #resumeb {
        background: url(../images/resumeb.png) no-repeat;
    }
    img.vert_linec, div.vert_linec {
        margin-top:  -346px;
        width:2px;
    }
    img.vert_lined {
        position:  absolute;
        top:  0px;
    }
    #gallery {
        float:  right;
        width: 680px;
        height:  425px;
        margin-top: -450px;
        margin-right:  25px;
        position:  relative;
        z-index:  200;
    }
    #galleryb {
        float:  right;
        width: 685px;
        height:  425px;
        margin-top: -450px;
        margin-right:  25px;
        position:  relative;
        z-index:  50;
    }
    #galleryc {
        float:  right;
        width: 685px;
        height:  425px;
        margin-right:  25px;
        margin-top: -450px;
        position:  relative;
        z-index:  50;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    div#slideshow {
        height:  330px;
        width:  480px;
        margin-left:  112px;
        margin-top:  14px;
    }
    div#slideshowc {
        height:  353px;
        width:  360px;
        position:  absolute;
        left:  172px;
        top:  0px;
        -moz-transform: rotate(1.5deg);  /* FF3.5+ */
        -o-transform: rotate(1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(1.5deg);  /* IE9 */
        transform: rotate(1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=-0.02617694830787315, M21=0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    div#soligsoft_words {
        width:  620px;
        height:  70px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing:  1px;
        line-height:  140%;
        position: absolute;
        left:  30px;
        top:  377px;
        z-index:  350;
    }
    .soligsoft_site {
        margin-top:  2px;
    }
    .soligsoft_siteb {
        font-weight:  bold;
    }
    .drop-box {
        /* The share box */
        width:325px;
        height:300px;
        position:  relative;
        margin-left:  745px;
        margin-top:  340px;
        z-index: 300;
        background-image:  url(../images/coffee.png);
        background-repeat:  no-repeat;
    }
    .drop-boxb {
        /* The share box */
        width:325px;
        height:300px;
        position:  relative;
        margin-left:  485px;
        margin-top:  -100px;
        z-index: 300;
        background-image:  url(../images/coffee.png);
        background-repeat:  no-repeat;
    }
    .drop-boxc {
        /* The share box */
        width:325px;
        height:300px;
        position:  relative;
        margin-left:  470px;
        margin-top:  340px;
        z-index: 300;
        background-image:  url(../images/coffee.png);
        background-repeat:  no-repeat;
    }
    .pic, .pic a {
        /* Each picture and the hyperlink inside it */
        width:200px;
        height:200px;
        overflow:hidden;
    }
    .pic {
        /* Styles specific to the pic class */
        position:absolute;
        border:5px solid #EEEEEE;
        border-bottom:5px solid #eeeeee;
        z-index:  600;
        /* CSS3 Box Shadow */
        -moz-box-shadow:2px 2px 3px #333333;
        -webkit-box-shadow:2px 2px 3px #333333;
        box-shadow:2px 2px 3px #333333;
    }
    .pic a {
        /* Specific styles for the hyperlinks */
        text-indent:-999px;
        display:block;/* Setting display to block enables advanced styling for links */
    }
    label, input {
        /* The modal dialog URL field */
        display:block;
        padding:3px;
    }
    label {
        font-size:10px;
    }
    fieldset {
        border:0;
        margin-top:10px;
    }
    #url {
        /* The URL field */
        width:240px;
    }
    div#thumbnails {
        width: 700px;
        height:  430px;
        margin-left: 0px;
        margin-top:  -405px;
    }
    .table {
        width:  680px;
        height:  335px;
        border-spacing:  10px;
        margin-left:  30px;
        margin-top:  20px;
    }
    .table a.thumbs img {
        /* CSS3 Box Shadow */
        -moz-box-shadow:2px 2px 3px #333333;
        -webkit-box-shadow:2px 2px 3px #333333;
        box-shadow:2px 2px 3px #333333;
    }
    .pwork img {
        -moz-transform: rotate(4deg);  /* FF3.5+ */
        -o-transform: rotate(4deg);  /* Opera 10.5 */
        -webkit-transform: rotate(4deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(4deg);  /* IE9 */
        transform: rotate(4deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242, sizingMethod='auto expand');
        zoom: 1;
    }
    div#webdesign_words {
        width:  620px;
        height:  70px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing:  1px;
        margin-top:  -80px;
        margin-left:  30px;
        position:  relative;
        z-index:  250;
    }
    p.webdesign_wordsb {
        line-height:  140%;
    }
    div#footer {
        clear:  both;
        /*border:  solid yellow 1px;*/
        width:  920px;
        height:  90px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing: 1px;
        top:  130px;
        left:  30px;
        position:  absolute;
        z-index:  20;
    }
    div#footerb {
        clear:  both;
        /*border:  solid yellow 1px;*/
        width:  920px;
        height:  90px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing: 1px;
        top:  460px;
        left:  -223px;
        position:  absolute;
        z-index:  20;
    }
    .studio_name {
        font-size:  14px;
        font-weight: bold;
        margin-bottom:  10px;
    }
    .smallcaps, .smallcaps2 {
        font-size:  12px;
    }
    p.phone {
        margin-top:  4px;
    }
    p.email {
        width:  190px;
        margin-top:  10px;
    }
    p.email a {
        margin-top:  10px;
        text-decoration:  none;
        color:  #000;/*border:  solid blue 1px;*/
    }
    p.email a:hover {
        margin-top:  10px;
        color:  #666;/*border:  solid green 1px;*/
    }
    .map {
        float:right;
        margin-right:  290px;
        margin-top:  -75px;
    }
    .map ul {
     font-family: font-family:  'Reenie Beanie', serif;
        font-size:  12px;
        width:  233px;
        background : transparent;
    }
    .map ul li {
        list-style:  none;
        margin-top:  3;
    }
    .map ul li a {
     font-family: font-family:  'Reenie Beanie', serif;
        text-decoration : none;
        line-height:  115%;
        color:  #000;
    }
    .map ul li a:hover {
        color:  #666;
    }
    .socialb {
        float:  right;
        width:  100px;
        height:  90px;
        margin-right:  -325px;
        margin-top:  -75px;
    }
    img.twitter {
        margin-left:  10px;
    }
    img.linkedin {
        margin-top:  10px;
    }
    .pencil {
        position:  absolute;
        z-index:  100;
        top:  735px;
        left:  25px;
    }
    .pencilb {
        position:  absolute;
        z-index:  100;
        top:  540px;
        left:  -165px;
    }
    Worth a try

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa, thank you.

    The was actually my next idea, unfortunately I had to leave the project for a clients needs(a new html email). Thanks again, will try first thing tomorrow and of course let you know.

    PChuprina

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PChuprina View Post
    noonnope: The slideshow div actually contains the slideshow........
    Obviously. I was just experimenting and sharing.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Unfortunately your work around didn't work(sigh). Really not sure which way to go now. Could it be a issue of cross slide? Is it something inherent with Firefox 4.0(audible sigh)?

    PChuprina

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    The code you supplied got me thinking, again thank you very much.

    To solve the problem I removed the rotate code from "div#galleryc" squaring it off. I then removed it from "div#slideshowc." I then added the rotation to
    "div#soligsoft_words." it seems to work in firefox4.

    Result can be seen at: ChuprinaCreative

    Remaining issue is angling the thin vertical line. Thanks again!

    PChuprina

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    /*CSS *libraries**/
    @import url("reset.css");
     @font-face {
     font-family: 'ArchitectsDaughterRegular';
     src: url('../fonts/architectsdaughter-webfont.eot');
     src: url('../fonts/architectsdaughter-webfont.eot?iefix') format('eot'),  url('../fonts/architectsdaughter-webfont.woff') format('woff'),  url('../fonts/architectsdaughter-webfont.ttf') format('truetype'),  url('../fonts/architectsdaughter-webfont.svg#webfont3LMaigq5') format('svg');
     font-weight: normal;
     font-style: normal;
    }
    body {
        background-color: #000;
    }
    #main {
        /* The main container */
        background-image:  url(../images/bkgrd2.jpg);
        background-repeat:no-repeat;
        background-position:  center;
        margin:  auto;
        margin-top:   0px;
        width:1240px;
        height:1000px;
        position:  relative;
        z-index: 100;
    }
    .title {
        width:  781px;
        height:  117px;
        margin-left:  131px;
        padding-top:  65px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    div#body_content {
        /*border:  solid red 1px;*/
        height: 577px;
        width:  950px;
        margin-top:  -5px;
        margin-left:  130px;
    }
    .nav {
        float:  left;
        width:  233px;
        height:  450px;
        margin-top:  -325px;
        margin-left:  38px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    .navb {
        float:  left;
        width:  233px;
        height:  450px;
        margin-top:  16px;
        margin-left:  30px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    .nav ul li, .navb ul li {
        list-style:  none;
    }
    #homeb, #web_designb, #photographyb, #blogb, #print_storeb, #client_servicesb, #contactb, #aboutb, #resumeb {
        display: block;
        width: 210px;
        height: 30px;
        margin-top:  10px;
        margin-left:  -16px;
        -moz-transform: rotate(-1.5deg);  /* FF3.5+ */
        -o-transform: rotate(-1.5deg);  /* Opera 10.5 */
        -webkit-transform: rotate(-1.5deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(-1.5deg);  /* IE9 */
        transform: rotate(-1.5deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573, sizingMethod='auto expand');
        zoom: 1;
    }
    /*everyday items about button hover*/
    #homeb:hover, #web_designb:hover, #photographyb:hover, #blogb:hover, #print_storeb:hover, #client_servicesb:hover, #contactb:hover, #aboutb:hover, #resumeb:hover {
        background-position: 0 -30px;
    }
    #homeb {
        background: url(../images/homeb.png) no-repeat;
    }
    #web_designb {
        background: url(../images/web_desb.png) no-repeat;
    }
    #photographyb {
        background: url(../images/photographyb.png) no-repeat;
    }
    #blogb {
        background: url(../images/blogb.png) no-repeat;
    }
    #print_storeb {
        background: url(../images/print_storeb.png) no-repeat;
    }
    #client_servicesb {
        background: url(../images/client_servicesb.png) no-repeat;
    }
    #contactb {
        background: url(../images/contactb.png) no-repeat;
    }
    #aboutb {
        background: url(../images/aboutb.png) no-repeat;
    }
    #resumeb {
        background: url(../images/resumeb.png) no-repeat;
    }
    img.vert_linec, div.vert_linec {
        margin-top:  -346px;
        width:2px;
    }
    img.vert_lined {
        position:  absolute;
        top:  0px;
    }
    #gallery {
        float:  right;
        width: 680px;
        height:  425px;
        margin-top: -450px;
        margin-right:  25px;
        position:  relative;
        z-index:  200;
    }
    #galleryb {
        float:  right;
        width: 685px;
        height:  425px;
        margin-top: -450px;
        margin-right:  25px;
        position:  relative;
        z-index:  50;
    }
    #galleryc {
        float:  right;
        width: 685px;
        height:  425px;
        margin-right:  25px;
        margin-top: -450px;
        position:  relative;
        z-index:  50;
    }
    div#slideshow {
        height:  330px;
        width:  480px;
        margin-left:  112px;
        margin-top:  14px;
    }
    div#slideshowc {
        height:  353px;
        width:  360px;
        position:  absolute;
        left:  172px;
        top:  0px;
    }
    div#soligsoft_words {
        width:  620px;
        height:  70px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing:  1px;
        line-height:  140%;
        position: absolute;
        left:  30px;
        top:  377px;
        z-index:  350;
    }
    .soligsoft_site {
        margin-top:  2px;
    }
    .soligsoft_siteb {
        font-weight:  bold;
    }
    .drop-box {
        /* The share box */
        width:325px;
        height:300px;
        position:  relative;
        margin-left:  745px;
        margin-top:  340px;
        z-index: 300;
        background-image:  url(../images/coffee.png);
        background-repeat:  no-repeat;
    }
    .drop-boxb {
        /* The share box */
        width:325px;
        height:300px;
        position:  relative;
        margin-left:  485px;
        margin-top:  -100px;
        z-index: 300;
        background-image:  url(../images/coffee.png);
        background-repeat:  no-repeat;
    }
    .drop-boxc {
        /* The share box */
        width:325px;
        height:300px;
        position:  relative;
        margin-left:  470px;
        margin-top:  340px;
        z-index: 300;
        background-image:  url(../images/coffee.png);
        background-repeat:  no-repeat;
    }
    .pic, .pic a {
        /* Each picture and the hyperlink inside it */
        width:200px;
        height:200px;
        overflow:hidden;
    }
    .pic {
        /* Styles specific to the pic class */
        position:absolute;
        border:5px solid #EEEEEE;
        border-bottom:5px solid #eeeeee;
        z-index:  600;
        /* CSS3 Box Shadow */
        -moz-box-shadow:2px 2px 3px #333333;
        -webkit-box-shadow:2px 2px 3px #333333;
        box-shadow:2px 2px 3px #333333;
    }
    .pic a {
        /* Specific styles for the hyperlinks */
        text-indent:-999px;
        display:block;/* Setting display to block enables advanced styling for links */
    }
    label, input {
        /* The modal dialog URL field */
        display:block;
        padding:3px;
    }
    label {
        font-size:10px;
    }
    fieldset {
        border:0;
        margin-top:10px;
    }
    #url {
        /* The URL field */
        width:240px;
    }
    div#thumbnails {
        width: 700px;
        height:  430px;
        margin-left: 0px;
        margin-top:  -405px;
    }
    .table {
        width:  680px;
        height:  335px;
        border-spacing:  10px;
        margin-left:  30px;
        margin-top:  20px;
    }
    .table a.thumbs img {
        /* CSS3 Box Shadow */
        -moz-box-shadow:2px 2px 3px #333333;
        -webkit-box-shadow:2px 2px 3px #333333;
        box-shadow:2px 2px 3px #333333;
    }
    .pwork img {
        -moz-transform: rotate(4deg);  /* FF3.5+ */
        -o-transform: rotate(4deg);  /* Opera 10.5 */
        -webkit-transform: rotate(4deg);  /* Saf3.1+, Chrome */
        -ms-transform: rotate(4deg);  /* IE9 */
        transform: rotate(4deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
     M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242, sizingMethod='auto expand');
        zoom: 1;
    }
    div#webdesign_words {
        width:  620px;
        height:  70px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing:  1px;
        margin-top:  -80px;
        margin-left:  30px;
        position:  relative;
        z-index:  250;
    }
    p.webdesign_wordsb {
        line-height:  140%;
    }
    div#footer {
        clear:  both;
        /*border:  solid yellow 1px;*/
        width:  920px;
        height:  90px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing: 1px;
        top:  130px;
        left:  30px;
        position:  absolute;
        z-index:  20;
    }
    div#footerb {
        clear:  both;
        /*border:  solid yellow 1px;*/
        width:  920px;
        height:  90px;
        font-family:  ArchitectsDaughterRegular, serif;
        font-size:  12px;
        letter-spacing: 1px;
        top:  460px;
        left:  -223px;
        position:  absolute;
        z-index:  20;
    }
    .studio_name {
        font-size:  14px;
        font-weight: bold;
        margin-bottom:  10px;
    }
    .smallcaps, .smallcaps2 {
        font-size:  12px;
    }
    p.phone {
        margin-top:  4px;
    }
    p.email {
        width:  190px;
        margin-top:  10px;
    }
    p.email a {
        margin-top:  10px;
        text-decoration:  none;
        color:  #000;/*border:  solid blue 1px;*/
    }
    p.email a:hover {
        margin-top:  10px;
        color:  #666;/*border:  solid green 1px;*/
    }
    .map {
        float:right;
        margin-right:  290px;
        margin-top:  -75px;
    }
    .map ul {
     font-family: font-family:  'Reenie Beanie', serif;
        font-size:  12px;
        width:  233px;
        background : transparent;
    }
    .map ul li {
        list-style:  none;
        margin-top:  3;
    }
    .map ul li a {
     font-family: font-family:  'Reenie Beanie', serif;
        text-decoration : none;
        line-height:  115%;
        color:  #000;
    }
    .map ul li a:hover {
        color:  #666;
    }
    .socialb {
        float:  right;
        width:  100px;
        height:  90px;
        margin-right:  -325px;
        margin-top:  -75px;
    }
    img.twitter {
        margin-left:  10px;
    }
    img.linkedin {
        margin-top:  10px;
    }
    .pencil {
        position:  absolute;
        z-index:  100;
        top:  735px;
        left:  25px;
    }
    .pencilb {
        position:  absolute;
        z-index:  100;
        top:  540px;
        left:  -165px;
    }

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by PChuprina View Post
    Hi Paul,

    Remaining issue is angling the thin vertical line. Thanks again!
    Maybe if the area is a fixed height then you can absolutely position the blue line underneath so that you aren't interfering with the other elements.

    I think the problem is that if the transition occurs within an area that has been rotated then all elements within that area need to be re-drawn and hence the jump.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •