Vertical News Scroll Issue in IE

Discussion in 'Web Design' started by romirockstar, Nov 1, 2010.

to remove all ads.
  1. romirockstar

    romirockstar New Member

    Messages:
    8
    hi Everyone
    how are ya?
    i hope you all are good
    recently i worked one of my client website http://www.ascentis.com.sg
    its looking good in every browser except IE the Vertical News Scroll looks fine if user set Compatible mode but without compatible all alignment is out please help me Thanks in Advance

    Here's the CSS of Vertical News Scroll
    --------------------------------------------------------------------------
    /* News Ticker */
    Code:
    #ticker { 
    width:223px; 
    height:248px;
    border:0px solid #aaaaaa;
    overflow:hidden;
    }
    
    #ticker dt { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    color:#F61500; 
    font-weight:bold; 
    padding:0 10px 5px 10px; 
    padding-top:10px; 
    border:0px solid #ffffff; 
    border-bottom:none; 
    border-right:none; 
    position:relative; 
    }
    
    #ticker dd { 
    font-family:Arial, Helvetica, sans-serif; 
    font-style:normal; 
    font-size:12px; 
    line-height:1.8em; 
    margin-left:0;
    padding:0 10px 10px 10px; 
    border-bottom:1px solid #aaaaaa; 
    border-left:0px solid #ffffff; 
    position:relative; color:#656565; 
    }
    
    #ticker dd.last { 
    border-bottom:1px solid #ffffff; 
    }
    #ticker div { 
    margin-top:0; 
    overflow:hidden;
    }
    
     
    Last edited by a moderator: Nov 1, 2010
  2. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Ok your problem is stemming from a incorrect use of overflow and relative position. And IE is just very picky, like a spoiled child :D

    If you don't use it already, I solved your problem by simply examining your code with the IE developer toolbar. Great add-on for IE.

    CSS adjustments:
    Definition List (ticker)
    Code:
    dl#ticker {
    width:223px;
    height:248px;
    overflow:hidden;
    }
    
    Divisions within "ticker"
    - delete all this

    Definition Items within "ticker"
    - consolidate all border properties to one (look into css shorthand)
    - consolidate padding
    - consolidate font
    - remove relative position
    Code:
    dl#ticker dt {
    border:none;
    padding:10px 10px 5px;
    font:bold 14px Arial, Helvetica, sans-serif;
    color:#F61500;
    }
    
    Definition Descriptions within "ticker"
    - consolidate padding
    - consolidate font
    - delete left border properties (no need for this)
    - remove relative position
    Code:
    dl#ticker dt {
    border-bottom:solid 1px #aaa;
    padding:0 10px 10px;
    margin-left:0;
    font:normal 14px/1.8em Arial, Helvetica, sans-serif;
    color:#656565;
    }
    

    Hope this helps. One thing to remember, IE is a pain but it does force you to watch how to attribute your CSS. Many modern browsers will ignore pragmatic errors and misc css properties, but IE often doesn't. So in a weird way, IE does help you become a better web developer :confused::D

    Let us know if you need more help.
     
  3. romirockstar

    romirockstar New Member

    Messages:
    8
    hi Pixel Pusher
    thank you for explaining everything i will try this code today and let you know if there's any issue once again i appreciate you to giving time to my post
    have a wonderful day

    Regards,
    Romi
     
  4. romirockstar

    romirockstar New Member

    Messages:
    8
    hi mate
    i made the separate style sheet of IE
    but the issue still not solved please you check out the website
    http://www.ascentis.com.sg
     
  5. romirockstar

    romirockstar New Member

    Messages:
    8
  6. bcee

    bcee New Member

    Messages:
    367
    IE8 Vista x64 no problem with form for me.
     
  7. romirockstar

    romirockstar New Member

    Messages:
    8
    hi @Bcee thanks for checking for me :)
    but my side still there's issue
    have a wonderful day

    Regards,
    Romi
     
  8. smoovo

    smoovo New Member

    Messages:
    377
    I see that you write your script from right to left. I mean, your div class "right" comes before the div "left". If you do that, the first div to appear is the right one with float "right", than the left one (your news) appear after, but since you already provide the right one, you closed the line and the left will go down line.

    In Firefox i see it OK, but IE won't let you, i see the problem. So first try replace between the divs, so the left will come first.

    I hope it helped. :)
     
  9. romirockstar

    romirockstar New Member

    Messages:
    8
    @Smoovo
    is there any other way to solve this problem
     
  10. romirockstar

    romirockstar New Member

    Messages:
    8
    @smoovo
    i changed what you mention in your last post left to right and uploaded on another server but still no effect on news scrolls in IE please check out the link >> http://imaginativelab.com/test/index2.html
     
  11. smoovo

    smoovo New Member

    Messages:
    377
    I see the change, you placed the "left" div inside the "body-resize", but the "right" outside...

    Let me explain you couple of things, and then you should stick to it and fix your structure.

    1. You are using "body-resize" to give the page the width you want. All the content should be inside.
    2. To use float divs you should always use left before right (for EN pages).
    3. Paddings add their size to the original size. If you give width 100px and padding 5px all around, the width will be now 110px.

    First, put them together inside the "body-resize", left before right. Then, go over your CSS and calculate the width of each part. I took screen shot of IE6 and the width of the left div is 269px (includes the border), and i know you gave it 224px, this is good place to start.
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Are you sure I checked with IE, with compatibility mode on (where it was breaking before) and it looks fine now. Did you try a ctrl+refresh?

    What version of IE is the site breaking for you?
     
  13. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077

    Lol, left and right floats are just about the stacking order, not whether you (the user) literally read left to right or right to left. Sorry not laughing at you, just found that amusing :D
     
  14. smoovo

    smoovo New Member

    Messages:
    377
    It's because you didn't ever built right to left website! The HTML document can be read by the browser both ways, by default it is left to right.

    Since it's left to right, if you load the "float:right" div first you closing the line, and for IE6 (from your other posts i assuming you don't use it) its critical, and the next "float:left" will go down a line and stick left. This is one of the problems in his site, the other one is the width size of the left div. :D
     
  15. romirockstar

    romirockstar New Member

    Messages:
    8
    hi guys
    i solved the problem now its working fine on IE i just gave the position:relative; on #ticker
    thanks everyone for replied in this post
    have a good day

    Regards,
    Romi
     
  16. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    I am fully aware the browser language can be altered and yes this will determine how the page is processed.

    What I was saying is left or right floats are purely for layout aspects. They are not made specifically for left or right reading cultures. Sure if you are creating a list of floated items, left to right would be more intuitive for a western culture and visa versa for eastern.
     
  17. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Cool, good to hear Romi. Your welcome.
     

Share This Page