0

Hi guys,

im reasonably new to the world of CSS and cross browser support (i have always worked on the backend of systems in the past).

ive created a layout for a website im creating as a learning experience for a friend. Ive tried to find the source of my problem for a few days now, but cant seem to put my finger on the issue.

Basically its a MVC3 Asp.net page but all im concerned about at the moment is the layout of my DIV's.

They display correctly in Chrome, And Firefox (which i am developing in as i understand that's what W3C Recommends) however in I.E i cant fathom what is going on. its almost like some of my divs are mirrored and duplicated.

Im really struggling as i don't even know where else to look, or what to search for.

id really appreciate some advice on the issue, even just a pointer for me in the direction of what is causing it for me to research would be appreciated.

My code is as follows (please be kind, like i said im very new - although constructive feedback on any aspect of my code is appreciated)

Style.css

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
background-image:url(../../Content/SiteImages/03-canvas.jpg)
}
#wrapper { 
 margin: 0 auto;
 width: 922px;

}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 80px;
 margin: 10px 0px 5px 0px;
 background: #1d2021;
}
#leftcolumn { 
 
 border: 1px solid #ccc;
 background: #383a3b;
 margin: 0px 0px 5px 0px;
 height: 445px;
 width: 145px;
 float: left;
}

#Step{
margin-top:6px;
padding:5px;
color:#000000;
}
#activeStep{
margin-top:6px;
padding:5px;
color:#ffffff;
border-bottom-color:#8c2121;
border-bottom:thin;
}

#leftcolumnSpacer{
height:5px;
}
#rightcolumn { 
 float: right;
 color: #333;
 
 background: #383a3b;
 
 
 height: 425px;
 width: 772px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 color: #ffffff;
 border: 1px solid #ccc;
 background: #1d2021;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}



#images{ 
 width: 772px;
 height:297px;
 background:#383a3b;

}

#samples{
width:772px;
height:114px;
background:#2b2c2d;
}

#navigation{
width:772px;
height:35px;
background:#383a3b;

}

#sampleWrapper{
height:100%;
width:36%;
float:left;
}

#sample{
height:208px;
width:100%;
background:#383a3b;

}

#description
{
color:White;
height:89px;
width:100%;
background:#383a3b;
}

#jacket{
height:100%;
width:34%;
background:#383a3b;
float:left;
}

#trousers{
height:100%;
width:30%;
background:#383a3b;
float:left;

}

#imgTrousers
{
float:right;	
}


#imgJacket{
position:absolute;
z-index:0;

}

#imgLining
{
position:absolute;
z-index:1;
}

#imgLapel
{
position:absolute;
z-index:2;
}

#imgVents
{
position:absolute;
z-index:3;
}

#imgButton
{
position:absolute;
z-index:4;
}

#imgEbayCustomer{
float:right;
}

#imgNextStep{
float:right;
}

#imgPreviousStep{
float:left;
}

FillSuit.html (its a MVC page but is in html format here as i presume it will not make a difference when simply dealing with divs)

<!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>
    <title>fillSuit</title>

<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>

<form id="FormSample" method="post" runat="server">

 <div id="wrapper">

   

         <!-- Begin Header -->

         <div id="header">

             <img src="../../Content/SiteImages/logo80X240.png" />

             <img id="imgEbayCustomer" src="../../Content/SiteImages/Ebaycustomer3DSuitDesigner240x80.png" />

			   

		 </div>

		 <!-- End Header -->

		 

		 <!-- Begin Left Column -->

		 <div id="leftcolumn">

             <img src="../../Content/SiteImages/orderProgress.png" />	 <p>
         <div id="leftcolumnSpacer">
         </div>
         <div id="activeStep">
         
         Step 1<BR />
         Choose Your Fabric
         <P>
         </div>

		    <div id="Step">
            Step 2<BR />
            Choose Your Lining<P>
            </div> 
            
                <div id="Step">
            Step 3<BR />
            Choose Your Lapel<P>
            </div> 
            
                <div id="Step">
            Step 4<BR />
            Choose Your Buttons<P>
            </div> 

		     <div id="Step">
            Step 5<BR />
            Choose Your Vents<P>
            </div> 
            
                <div id="Step">
            Step 6<BR />
            Choose Your Fitment<P>
            </div> 
            
                <div id="Step">
            Step 7<BR />
            Measurments<P>
            </div> 
            
            <div id="Step">
            Step 8<BR />
            Confirm Your Order<P>
            </div> 

		 </div>

		 <!-- End Left Column -->

		 

		 <!-- Begin Right Column -->

		 <div id="rightcolumn">
         
         <div id="images">

         <div id="sampleWrapper">
            <div id="sample">
            
             <img src="../../Content/DesignerImages/CloseUpFabricImage<%=Model.Image %>.png"/>
           

         
             </div>
            <div id="description">
        <b>  <%=Model.FabricName%></b><br />
          <%=Model.Description %>
            </div>
         </div>
         
         <div id="jacket">
             <img id="imgJacket" src="../../Content/DesignerImages/JacketImage<%=Model.Image %>.png"/>
             <img id="imgLining" src="../../Content/DesignerImages/LiningImage<%=Model.LiningImage %>.png" />
             <img id="imgLapel" src="../../Content/DesignerImages/LapelImage<%=Model.Image %><%=Model.LapelImage %>.png" />
             <img id="imgButton" src="../../Content/DesignerImages/ButtonImage<%=Model.ButtonImage %>.png" />
             
      
        
         </div>
         
         <div id="trousers">
          <img id="imgTrousers" src="../../Content/DesignerImages/TrouserImage<%=Model.Image %>.png" />
         </div>
         
         </div>
         
         <div id ="samples">
          <form id="Form2" action="FillSuit" method="post">
     <input type="image" src="../../Content/DesignerImages/FabricThumbImage1.png" src name="Fabric" value="1" />
    <input type="image" src="../../Content/DesignerImages/FabricThumbImage2.png" name="Fabric" value="2" />
    <input type="image" src="../../Content/DesignerImages/FabricThumbImage3.png" name="Fabric" value="3" />
    <input type="image"src="../../Content/DesignerImages/FabricThumbImage4.png"  name="Fabric" value="4" />
    <input type="image" src="../../Content/DesignerImages/FabricThumbImage5.png" name="Fabric" value="5" />
    <input type="image" src="../../Content/DesignerImages/FabricThumbImage6.png" name="Fabric" value="6" />
     <input type="image" src="../../Content/DesignerImages/FabricThumbImage7.png" name="Fabric" value="7" />
    
        
        </form>
          </div>
         
         <div id ="navigation">
             <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Suit/DesignLining">Next Step: Step2 Choose Lining</asp:HyperLink>
             <img id="imgPreviousStep" src="../../Content/SiteImages/previousStep.png" />
             <img id="imgNextStep" src="../../Content/SiteImages/nextStep.png" />
          </div>
 

		 

		 </div>

		 <!-- End Right Column -->

		 

		 <!-- Begin Footer -->

		 <div id="footer">

		       

			   	

			    

	     </div>

		 <!-- End Footer -->

		 

   </div>

   <!-- End Wrapper -->

    <div>
    </form>
       
        

         
        
    
</body>
</html>

like i say if you view this in Chrome or Firefox you can see what im trying to acheive in IE.

Thank you in advance

1
Contributor
1
Reply
2
Views
5 Years
Discussion Span
Last Post by loveforfire33
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.