Vertical News Scroll Issue in IE

romirockstar

New Member
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:

PixelPusher

Super Moderator
Staff member
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.
 

romirockstar

New Member
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
 

smoovo

New Member
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. :)
 

smoovo

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

PixelPusher

Super Moderator
Staff member
...
2. To use float divs you should always use left before right (for EN pages).
...


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
 

smoovo

New Member
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

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
 

romirockstar

New Member
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
 

PixelPusher

Super Moderator
Staff member
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

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