SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question some browser issues on my code

    hi,

    my website is: http://www.terranartworks.com/testsite/tsv1/index.html
    i have some issues acting different for different browsers.

    1.the red panel appearing under the grey buttons on bottom,seems only ff,not other browsers.
    2.when user clicks one of grey buttons on the bottom,red panel should start under the white panel.but it starts a little bit of its left side.
    3. the white panel on the left side on islerimiz.html(which user clicks middle button on bottom) page should be blurred.i added script for this but it is not doing blurring thing.the same script is on the iletisim.html(which user clicks rightest button on bottom) page and it is working truly.


    ie6 errors:

    1.the red point seems as a rectangle.
    2.red panel script is not working.
    3.the background of page and the logo's background should be the same but they seems different
    4.the blurred panel on islerimiz.html page is not appearing at all.the bottom buttons seems true but the active button's color should be black but it seems grey too.besides little pictures should appear when mouse hover on the grey buttons,appears on open position.
    5.the blurred panel on iletisim.html is not appearing.the pictures on the blured panel appears with shadows and shape is rectangle.also the links on that pictures is not clickable.


    how can i solve this problems with css.if i couldn't solve with css,i can try jquery but my first choice is css.i have more than one javascript library on index page.but if i remove one of them,some scripts is not working.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Okay, we'll see what the good people in the CSS forum can do to help you in regard to using CSS to resolve these issues of yours.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    hi,

    my website is: http://www.terranartworks.com/testsite/tsv1/index.html
    i have some issues acting different for different browsers.

    1.the red panel appearing under the grey buttons on bottom,seems only ff,not other browsers.
    2.when user clicks one of grey buttons on the bottom,red panel should start under the white panel.but it starts a little bit of its left side.
    3. the white panel on the left side on islerimiz.html(which user clicks middle button on bottom) page should be blurred.i added script for this but it is not doing blurring thing.the same script is on the iletisim.html(which user clicks rightest button on bottom) page and it is working truly.
    You can try implementing the vendor prefixes for the transition property and see if the other browsers start working:

    -webkit-transition:
    -moz-transition:
    -o-transition:
    transition:

    http://caniuse.com/#feat=css-transitions

    Quote Originally Posted by sweetysweety View Post
    ie6 errors:

    1.the red point seems as a rectangle.
    2.red panel script is not working.
    3.the background of page and the logo's background should be the same but they seems different
    4.the blurred panel on islerimiz.html page is not appearing at all.the bottom buttons seems true but the active button's color should be black but it seems grey too.besides little pictures should appear when mouse hover on the grey buttons,appears on open position.
    5.the blurred panel on iletisim.html is not appearing.the pictures on the blured panel appears with shadows and shape is rectangle.also the links on that pictures is not clickable.


    how can i solve this problems with css.if i couldn't solve with css,i can try jquery but my first choice is css.i have more than one javascript library on index page.but if i remove one of them,some scripts is not working.
    Good luck with IE6.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try implementing the vendor prefixes for the transition property and see if the other browsers start working:

    -webkit-transition:
    -moz-transition:
    -o-transition:
    transition:
    i already using this prefixes

    Good luck with IE6.
    have not any practical solution for ie6.i think,if i solve the problems on ie6,the upper versions for ie should work too.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    have not any practical solution for ie6.i think,if i solve the problems on ie6,the upper versions for ie should work too.
    IE9- does not understand transitions. I do not know what to recommend for IE. Someone else will have to pitch in here.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ronpat View Post
    IE9- does not understand transitions. I do not know what to recommend for IE. Someone else will have to pitch in here.
    The best solution to this is for the less capable web browsers to do without - it's something that a useful technique called progressive enhancement tends to be about.
    Go without transitions in less capable web browsers - that's the most pain-free way of doing things.

    If you want transitions in older web browsers, then that means adding a lot more web code. Something like jQuery has support for such things on older web browsers already built in, for example.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want transitions in older web browsers, then that means adding a lot more web code. Something like jQuery has support for such things on older web browsers already built in, for example.
    ok.no problem .if it is working,it doesn't matter whether if css of query.i fixed half of ie6 problem no1.it seems square now.but i must see that as a point.i added css3pie for this but it is not making corners rounded.

    i have a question about queries.ie6 not accepting of some scripts should be that i add newest version of library of jquery?

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello again.
    i'm trying to write jquery for transitions.i wrote this:
    Code:
    $(".ei-slider-thumbs li").live({
    			'mouseenter':function(){
    				$(".ei-slider-thumbs li img").animate({opacity:1,bottom:'20px'},{duration:400,easing:'swing'});
    				},
    			'mouseleave':function(){
    				$(".ei-slider-thumbs li img").animate({opacity:0,bottom:'57px'},{duration:400,easing:'swing'});
    				}
    			});

    it is doing a little bit of what i wanted.i actually want to remove css transition and put jquery code according to css.cause ie8 does not accepts transition.i want to hide all little pictures at the baginning and when user hover on one of the buttons,the releated picture will show and the others remains hided.
    i think i should add each method,i added also but i actually not figure out what to write in it.
    can anyone help me to solve this?


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
  •