www.webdeveloper.com
Results 1 to 3 of 3

Thread: Styling IE9 issue

Hybrid View

  1. #1
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    153

    Styling IE9 issue

    Well hello there,

    I have this slight issue. I had it all working and displaying correctly. I have run into this issue. I have a navigation and slideshow which are both on an angle as well as floating left and z-index in a way to display properly. It displays properly everywhere. Other computers, and such, except IE9. Although I've noticed this issue is with larger screens I belevie. The issue is that some things dont float left anymore and are not angled. Here is the website and code:
    http://www.wartachicago.org/wptest/

    HTML
    HTML Code:
    <!-- NAVIGATION AND SLIDESHOW DIV AND LINK BACK -->
    	<div id="header">
    		<a href="index.php"><img id="wartal" alt="WARTA_LOGO" src="http://www.wartachicago.org/wptest/wp-content/themes/Warta/images/warta.png"/></a>
    			<div id="pos1">
    				<div id="show">
    				</div>
    			</div>
    				
    				<div id="pos2">
    				<ul id="nav">
    				<li><a class="nav" href="index.php">Gł&#243;wna Strona</a></li>
    				<li><a class="nav" href="###">Kalendarz</a></li>
    				<li><a class="nav" href="###">Zdjęcia</a></li>
    				<li><a class="nav" href="###">Wiadomści</a></li>
    				<li><a class="nav" href="###">Informacjia o Hufcu</a></li>
    				<li><a class="nav" href="###">Jednostki</a></li>
    				<li><a class="nav" href="###">Sklepik</a></li>
    				<li><a class="nav" href="###">Kontakt</a></li>
    				</ul>
    				</div>
    	</div>
    CSS
    HTML Code:
    #header {
    	background-image: url("http://www.wartachicago.org/wptest/wp-content/themes/Warta/images/header.jpg");
    	background-repeat:no-repeat;
    	width:955px;
    	height:426px;
    }
    
    #wartal {
    	float:left;
    	padding-top:90px;
    	padding-left:98px;
    }
    
    #pos1 {
    	float:left;
    	padding-top:110px;
    	padding-left:115px;
    	transform: rotate(5.39deg);
    	-ms-transform: rotate(5.39deg); /* IE 9 */
    	-webkit-transform: rotate(5.39deg); /* Safari and Chrome */
    	-o-transform: rotate(5.39deg); /* Opera */
    	-moz-transform: rotate(5.39deg); /* Firefox */
    }
    
    #pos2 {
    	position:absolute;
    	z-index:1;
    	float:left;
    	padding-top: 175px;
    	padding-left:70px;
    	transform: rotate(-4.10deg);
    	-ms-transform: rotate(-4.10deg); /* IE 9 */
    	-webkit-transform: rotate(-4.10deg); /* Safari and Chrome */
    	-o-transform: rotate(-4.10deg); /* Opera */
    	-moz-transform: rotate(-4.10deg); /* Firefox */
    }
    
    ul#nav  {
    	list-style-type: none;
    	font: 15px Tahoma, Sans-serif; 
    	color:black;
    }
    
    li {
    	list-style-type: none;
    	padding-top:8px;
    }
    
     a:link {font: 15px Tahoma, Sans-serif; color:black; text-decoration:none;} /*unvisited link*/
     a:visited {font: 15px Tahoma, Sans-serif; color:black; text-decoration:none;} /*visited link*/
     a:hover {font: 15px Tahoma, Sans-serif; color:black; text-decoration:underline;} /*mouse over link*/
     a:active{font: 15px Tahoma, Sans-serif; color:black; text-decoration:underline;} /*selected link*/
    I've copy and pasted the most important bits of code for you to see. If anyone can help me out here that would be fantastic....
    For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,885
    Any chance your version of IE is forced into compatibility mode? The site looks fine to me on IE and Firefox, when they're in standards mode.

    Dave

  3. #3
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    153

    resolved

    How did I not notice that! Hahahah silly me, thanks!
    For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles