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