PDA

View Full Version : Horizontal text display vertical in IE9


Supraman92
05-14-2012, 08:33 PM
Hi, I'm trying to fix this webpage that apparently uses jquery and css.

It is a drop down box menu that is supposed to display text horizontally, but the text displays vertically down instead. The webpage displays correctly on google chrome but not on IE9. What could be the problem?

Supraman92
05-14-2012, 08:45 PM
view-source:http://10.40.1.25/ihc/VisitorGuide/Index.html

this is the source code. right click on the webpage, view page source.

gentleone
05-14-2012, 08:57 PM
view-source:http://10.40.1.25/ihc/VisitorGuide/Index.html
That link is not working!

Supraman92
05-14-2012, 09:03 PM
That link is not working!

Oh sorry


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Inventec Visitor Guide</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>





<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<style>

body{

background:#333 url(bg.jpg) repeat top left;

font-family:Arial;

}

span.reference{

position:fixed;

left:10px;

bottom:10px;

font-size:12px;

}

span.reference a{

color:#aaa;

text-transform:uppercase;

text-decoration:none;

text-shadow:1px 1px 1px #000;

margin-right:30px;

}

span.reference a:hover{

color:#ddd;

}

ul.sdt_menu{

margin-top:150px;

}

h1.title{

text-indent:-9000px;

background:transparent url(title.png) no-repeat top left;

width:633px;

height:69px;

}

</style>

</head>



<body>

<div class="content">

<h1 class="title">Inventec Visitor Guide</h1>



<ul id="sdt_menu" class="sdt_menu">

<li>

<a href="#">

<img src="images/2.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link"><b>Welcome</b></span>

<span class="sdt_descr">Make yourself at home</span>

</span>

</a>

<div class="sdt_box">

<a href="Documents/Welcome to Houston.pdf" target="_blank">Welcome to Houston</a>

<a href="Documents/RentalCarPolicy_Safety.pdf" target="_blank">英業達派駐暨差旅人員在美國分公司注意事項</a>

<a href="Documents/英業達北美分公司租賃車輛管理規則.pdf" target="_blank">英業達北美分公司租賃車輛管理規則</a>

</div>

</li>

<li>

<a href="#">

<img src="images/1.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link"><b>食、衣</b></span>

<span class="sdt_descr">Dining and Shopping</span>

</span>

</a>

<div class="sdt_box">

<a href="Documents/Texas Tax Back Location.pdf" target="_blank">外國人在德州購物退稅表格及地點</a>

<a href="http://www.chinatownconnection.com" target="_blank">Houston Chinatown</a>



</div>

</li>

<li>

<a href="#">

<img src="images/3.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link"><b>住</b></span>

<span class="sdt_descr">Lodge</span>

</span>

</a>

<div class="sdt_box">

<a href="Documents/Hotel.pdf" target="_blank">Hotel</a>

<a href="Documents/Apartment.pdf" target="_blank">Apartment</a>





</div>

</li>

<li>

<a href="#">

<img src="images/4.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link"><b>行</b></span>

<span class="sdt_descr">Travel</span>

</span>

</a>

<div class="sdt_box">

<a href="Documents/Flight ticket.pdf" target="_blank">Flight ticket</a>

<a href="Documents/Rent a Car.pdf" target="_blank">Rent a Car</a>

<a href="Documents/Maps.pdf" target="_blank">Maps</a>

<a href="Documents/Houston Tollway 8.pdf" target="_blank">Houston Tollway 8</a>

<a href="Documents/Traffic ticket.pdf" target="_blank">Traffic ticket</a>

<a href="Documents/駕車保命七要訣.pdf" target="_blank">駕車保命七要訣</a>

<a href="Documents/汽車加油須知.pdf" target="_blank">汽車加油須知</a>

<a href="Documents/加州交通新法規.pdf" target="_blank">加州交通新法規</a>

</div>

</li>

<li>

<a href="#">

<img src="images/5.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link"><b>證件</b></span>

<span class="sdt_descr">Documentation</span>

</span>

</a>

<div class="sdt_box">

<a href="Documents/Consulates.pdf" target="_blank">Consulates</a>

<a href="Documents/Passport.pdf" target="_blank">Passport</a>

<a href="Documents/Driver license.pdf" target="_blank">Driver license</a>

<a href="Documents/Social Security Admin.pdf" target="_blank">Social Security Admin</a>

</div>

</li>

<li>

<a href="#">

<img src="images/6.jpg" alt=""/>

<span class="sdt_active"></span>

<span class="sdt_wrap">

<span class="sdt_link"><b>其他</b></span>

<span class="sdt_descr">You might need to know</span>

</span>

</a>

<div class="sdt_box">

<a href="Documents/Post office.pdf" target="_blank">Post office</a>

<a href="Documents/Power of Authority Eng.pdf" target="_blank">Power of Authority</a>

<a href="Documents/Power of Attorney_Chinese.pdf" target="_blank">Power of Attorney</a>

<a href="Documents/Time zone.pdf" target="_blank">Time Zone</a>

<a href="Documents/Health.pdf" target="_blank">Health</a>

<a href="Documents/附記.pdf" target="_blank">附記</a>

</div>

</li>

</ul>

</div>

<div>

<span class="reference">

<a href="http://ihc-portal/ihc/Default.aspx">back to IHS home page</a>

</span>

</div>



<!-- The JavaScript -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<script type="text/javascript">

$(function() {

/**

* for each menu element, on mouseenter,

* we enlarge the image, and show both sdt_active span and

* sdt_wrap span. If the element has a sub menu (sdt_box),

* then we slide it - if the element is the last one in the menu

* we slide it to the left, otherwise to the right

*/

$('#sdt_menu > li').bind('mouseenter',function(){

var $elem = $(this);

$elem.find('img')

.stop(true)

.animate({

'width':'170px',

'height':'170px',

'left':'0px'

},400,'easeOutBack')

.andSelf()

.find('.sdt_wrap')

.stop(true)

.animate({'top':'140px'},500,'easeOutBack')

.andSelf()

.find('.sdt_active')

.stop(true)

.animate({'height':'170px'},300,function(){

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length){

var left = '170px';

if($elem.parent().children().length == $elem.index()+1)

left = '-170px';

$sub_menu.show().animate({'left':left},200);

}

});

}).bind('mouseleave',function(){

var $elem = $(this);

var $sub_menu = $elem.find('.sdt_box');

if($sub_menu.length)

$sub_menu.hide().css('left','0px');



$elem.find('.sdt_active')

.stop(true)

.animate({'height':'0px'},300)

.andSelf().find('img')

.stop(true)

.animate({

'width':'0px',

'height':'0px',

'left':'85px'},400)

.andSelf()

.find('.sdt_wrap')

.stop(true)

.animate({'top':'25px'},500);

});

});

</script>

</body>

</html>

Supraman92
05-14-2012, 09:22 PM
The characters in IE are displaying like this in the drop down menu

x
x
x
x
x

but its supposed to look like this. xxxxxxx it works in chrome but not in IE9

Another example. it's supposed to look like this

RENT A CAR

Instead it looks like this

RENT A
CAR

Supraman92
05-14-2012, 10:55 PM
Okay. It also does not work for IE8.

gentleone
05-14-2012, 11:28 PM
A link would be easier, but I figured out where that code is coming from and you can see the original version here:
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

Just compare things (mainly the CSS) and perhaps you'll notice where the problem lies.

Supraman92
05-15-2012, 04:05 AM
I would provide a link, but it is on a private server.. hah. Thanks for the link, I've already seen it before :P Not sure where to go from here.. :(

edbr
05-15-2012, 06:28 AM
there are a few links here http://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser

Supraman92
05-15-2012, 08:00 PM
ahh i still can't figure out the problem..


this is what it shows on IE 8 which also does not work on 9
http://i50.tinypic.com/2qu1wu1.png

this is what it's supposed to look like
http://i47.tinypic.com/5z31v8.png