logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-14-2012, 08:33 PM   #1
Supraman92
 
Join Date: May 2012
Posts: 7
Default Horizontal text display vertical in IE9

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 is offline   Reply With Quote
Old 05-14-2012, 08:45 PM   #2
Supraman92
 
Join Date: May 2012
Posts: 7
Default Source code

view-source:http://10.40.1.25/ihc/VisitorGuide/Index.html

this is the source code. right click on the webpage, view page source.
Supraman92 is offline   Reply With Quote
Old 05-14-2012, 08:57 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Supraman92 View Post
That link is not working!
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-14-2012, 09:03 PM   #4
Supraman92
 
Join Date: May 2012
Posts: 7
Default

Quote:
Originally Posted by gentleone View Post
That link is not working!
Oh sorry

HTML Code:
<!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>

Last edited by Supraman92; 05-14-2012 at 09:27 PM..
Supraman92 is offline   Reply With Quote
Old 05-14-2012, 09:22 PM   #5
Supraman92
 
Join Date: May 2012
Posts: 7
Default

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

Last edited by Supraman92; 05-14-2012 at 09:32 PM..
Supraman92 is offline   Reply With Quote
Old 05-14-2012, 10:55 PM   #6
Supraman92
 
Join Date: May 2012
Posts: 7
Default

Okay. It also does not work for IE8.
Supraman92 is offline   Reply With Quote
Old 05-14-2012, 11:28 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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/...down-box-menu/

Just compare things (mainly the CSS) and perhaps you'll notice where the problem lies.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-15-2012, 04:05 AM   #8
Supraman92
 
Join Date: May 2012
Posts: 7
Default

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..
Supraman92 is offline   Reply With Quote
Old 05-15-2012, 06:28 AM   #9
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

there are a few links here http://stackoverflow.com/questions/1...-cross-browser
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 05-15-2012, 08:00 PM   #10
Supraman92
 
Join Date: May 2012
Posts: 7
Default

ahh i still can't figure out the problem..


this is what it shows on IE 8 which also does not work on 9


this is what it's supposed to look like
Supraman92 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:55 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com