Need Some Simple Help With HTML/CSS
Scroll down and you will see image boxes marked as "Service #1, Service #2 and so on........ the first one on the left column, is on the right side of the left column when it should be on the leftside of the left column and they are out of sync numerically in IE (UNLESS) I hit the compatability view mode on the IE browser.
If you view my site in Firefox, Opera or Chrome it looks correct and all in order....
This left column is controlled by css and by the following div id and class tags:
<div id="content">
<div id="leftcolumn">
<div class="col1">
<div class="col2">
I basically repeated the same tags over and over to make 12 image boxes, but I did not changed the css to control past the first 2 div tags.
Here is the css code controlling that section....
/* === Left Column === */
#content #leftcolumn{
float:left;
width:569px;
background:url(images/leftcolumn.jpg) top repeat-x;
padding:30px 30px 30px 30px;
line-height:20px;
position:relative;
}
/* === Split Left Column into 2 === */
.col1{
float:left;
width:254px;
padding-right:30px;
margin-top:15px;
margin-bottom:15px;
}
.col2{
float:right;
width:254px;
padding-left:30px;
margin-top:15px;
margin-bottom:15px;
}
Any help would be greatly appreciated......
I could just simply leave it as it is and ask people to use the compatability mode on IE but I do not think that IE6 and IE7 have it, plus thats just to much to ask of fickle viewers....
Thanks ahead of time for you help...........
Steve
Facebook Cover, Header Banner & Ad Banner design