?
Solved

JQUERY and CSS problem when viewed on IE6 (page become dissorted)

Posted on 2011-04-25
3
Medium Priority
?
287 Views
Last Modified: 2012-08-13
Hi I have the below code...

When viewed in firefox, IE8 up, safari and chrome, It displays correctly... but when I view it in IE 6 and IE 7 it is not working.

Please, see the image below for comparison.

Any ideas, is greatly appreciated.

Should you have any inquiry please let me know.

Note* Click the Single View WebPart Page to view the content of the page.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="SingleViewWebpartTestPage._Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.5.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
        SelectSingleViewItems()   
        });

        function GenerateHTML() {

            var singleViewContainer = document.createElement("div");
            singleViewContainer.setAttribute("id", "SingleViewContainer");

            var leftContainer = document.createElement("div");
            leftContainer.setAttribute("id", "LeftContainer");

            var rightContainer = document.createElement("div");
            rightContainer.setAttribute("id", "RightContainer");

            singleViewContainer.appendChild(leftContainer);
            singleViewContainer.appendChild(rightContainer);

            var tempElement = document.createElement("div");
            tempElement.setAttribute("class", "pagination");
            tempElement.innerHTML = "Pagination Here";

            leftContainer.appendChild(tempElement);

            tempElement = document.createElement("div");
            tempElement.setAttribute("class", "SingleViewItems");
            tempElement.setAttribute("title", "tooltip here");

            leftContainer.appendChild(tempElement);


            var tempElementChild = document.createElement("input");
            tempElementChild.setAttribute("type", "hidden");
            tempElementChild.setAttribute("value", "ArticleIDHere");

            tempElement.appendChild(tempElementChild);

            var tempString = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
            tempElementChild = document.createElement("span");
            tempElementChild.setAttribute("class", "ArticleTitle");
            tempElementChild.setAttribute("title", "tooltip here");
            tempElementChild.innerHTML = tempString;

            tempElement.appendChild(tempElementChild);
            tempElementChild.appendChild = document.createElement("br");
            tempElement.appendChild(tempElementChild);

            tempElementChild = document.createElement("span");
            tempElementChild.setAttribute("class", "ArticleDescription");
            tempElementChild.innerHTML = "Article Description";

            tempElement.appendChild(tempElementChild);

            tempElementChild = document.createElement("a");
            tempElementChild.setAttribute("href", "javascript:void(0);");
            tempElementChild.setAttribute("class", "SingleViewReadMore");
            tempElementChild.innerHTML = "Read Now ¿";

            tempElement.appendChild(tempElementChild);

            //  right container...
            tempElement = document.createElement("span");
            tempElement.setAttribute("id", "headerTitle");
            tempElement.innerHTML = "Testing new article title header";

            rightContainer.appendChild(tempElement);

            tempElement = document.createElement("br")
            rightContainer.appendChild(tempElement);

            tempElement = document.createElement("span");
            tempElement.setAttribute("class","ArticleHeader");
            tempElement.innerHTML = "PDF";

            rightContainer.appendChild(tempElement);

            tempElement = document.createElement("img");
            tempElement.setAttribute("id", "contentImage");
            tempElement.setAttribute("src", "http://mojodev:11130/PublishingImages/Accenture/defaultArticle.jpg");
            tempElement.setAttribute("alt", "image here");

            rightContainer.appendChild(tempElement);

            tempElement = document.createElement("span");
            tempElement.setAttribute("class", "ArticleDescription");
            tempElement.innerHTML = tempString;

            rightContainer.appendChild(tempElement);

            var form1 = document.getElementById("form1");
            
            form1.appendChild(singleViewContainer);
            SelectSingleViewItems();
        }

        function SelectSingleViewItems() {
            $("#LeftContainer .SingleViewItems").click(function() {
                //Remove the style for the previously selected item.

                if ($(this).hasClass("SingleViewSelectedItem") == false) {

                    $(".SingleViewSelectedItem").find(".ArticleDescription").stop().css("font-weight", "normal");
                    $(".SingleViewSelectedItem").find(".ArticleTitle").stop()
                        .css("font-weight", "normal")
                        .css("color", "#aa1133");
                    $(".SingleViewSelectedItem").children("a")
                        .css("font-weight", "normal")
                        .hide();
                    $(".SingleViewSelectedItem").removeClass("SingleViewSelectedItem");

                    //Set the style for the currently selected items.
                    $(this).find(".ArticleDescription").stop().css("font-weight", "bold");
                    $(this).addClass("SingleViewSelectedItem");
                    $(this).find(".ArticleTitle").stop()
                        .css("font-weight", "bold")
                        .css("color", "#000000");
                    $(this).children("a")
                        .css("font-weight", "bold")
                        .show();
                    alert($(this).children("input").val());
                } else {
                    //code to navigate to other page.
                    alert('');
                }
            });
        }
        
        
                             
    </script>
    
    <style type="text/css">
        #SingleViewContainer
        {
            width:724px; 
            display:inline;                    
        }
       
        #SingleViewContainer #LeftContainer 
        {
            width:444px;
            float:left;
        }
        
        #SingleViewContainer #RightContainer 
        {
            width:258px;
            float:left; 
            margin-left:21px;
        }
        
                  
         #SingleViewContainer #LeftContainer .SingleViewItems
         {
             width:434px;
             border-top:solid 1px #FFFFFF;
             border-left:solid 1px #FFFFFF;
             border-right:solid 1px #FFFFFF;
             border-bottom:solid 1px #C0C0C0; 
             float:left;
             margin:0px;
             padding-top:10px;
             padding-left:10px;
             cursor:pointer;
                                              
         }     
         
         #SingleViewContainer #LeftContainer .SingleViewReadMore
         ,#SingleViewContainer #LeftContainer .ArticleTitle
         {
             font-family:Arial;
             font-size:11px; 
             color:#aa1133;                      
         }
         
         #SingleViewContainer #LeftContainer .ArticleTitle
         {
              
             display:-moz-inline-block;
             display:-moz-inline-box;
             display:inline-block;
             width:350px;                       
         }
         
         #SingleViewContainer #LeftContainer .SingleViewReadMore
         {
             float:right;
             margin-top:5px;
             margin-left:0px;
             margin-bottom:10px;
             margin-right:5px;
             padding:0px;
             display:none; 
             text-decoration: none;                                 
         }
         
         #SingleViewContainer #LeftContainer .ArticleDescription
         {
            font-family:Arial;
            font-size:11px; 
            color:#666666; 
            margin-top:5px;
            margin-left:0px;
            margin-bottom:10px;
            margin-right:5px;
            padding:0px;
            float:left; 
         }
         
        #SingleViewContainer #LeftContainer
         , #SingleViewContainer #RightContainer
         , #SingleViewContainer #LeftContainer .SingleViewItems
         {
             position:relative; 
         }
         
         .SingleViewSelectedItem
         {
           border-color:#000000 !important;
         } 
         
         #SingleViewContainer #LeftContainer .pagination
         {
            border-bottom:solid 1px #C0C0C0; 
            padding-bottom:10px;
            padding-left:10px;
            float:left;
            width:434px;
         }
         
          #SingleViewContainer #RightContainer #headerTitle
          {
            color: #aa1133;
            font-family:Arial;
            font-weight:bold;
            font-size:18px;
                         
          } 
          
          #SingleViewContainer #RightContainer #contentImage
          { 
              margin-top:10px;
              height:354px;
              width:258px;
          }
          
           #SingleViewContainer #RightContainer .ArticleHeader
          {
            font-family:Arial;
            font-size:12px; 
            color:#999977; 
            margin-top:5px;
            margin-left:0px;
            margin-bottom:10px;
            margin-right:5px;
            padding:0px;             
          }
          
          #SingleViewContainer #RightContainer .ArticleDescription
          {
            font-family:Arial;
            font-size:12px; 
            color:#666666; 
            position:relative;
            top:10px;           
          }
          
        
    </style>  
    
</head>
<body>
    <form id="form1" runat="server" >
    <h3 onclick="GenerateHTML()">Single View WebPart testpage click here!!!</h3> 
    
   </form>
</body>
</html>

Open in new window

ie6-output.bmp
ie8-output.bmp
0
Comment
Question by:PagodNaUtak
  • 3
3 Comments
 
LVL 8

Author Comment

by:PagodNaUtak
ID: 35458354
Important note:

The element is created when the "Single View Webpart Test Page " is clicked.
0
 
LVL 8

Accepted Solution

by:
PagodNaUtak earned 0 total points
ID: 35459187
Solved...

Instead of using Element.setAttribute("class","mySetting") in IE 6 and IE 7

use Element.setAttribute("className","mySetting") or
use the Element.className ="mySetting";

:)

0
 
LVL 8

Author Closing Comment

by:PagodNaUtak
ID: 35459190
Explained in accepted answer...
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question