We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

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

PagodNaUtak
PagodNaUtak asked
on
Medium Priority
309 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
Comment
Watch Question

Author

Commented:
Important note:

The element is created when the "Single View Webpart Test Page " is clicked.
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Explained in accepted answer...
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.