Need Some Simple Help With HTML/CSS

6 replies
  • WEB DESIGN
  • |
Hi, I have a website I am working on, the URL is Professional Graphic Design Solutions it views perfectly in all browsers except IE8, I have not checked 7 or 6 .

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
#html or css #simple
  • Profile picture of the author davidsbain
    Steve,
    I am not an expert in this so I could be wrong. Here is what I think is the problem. The 'my principles' is longer than the 'my promise' so when it goes to place 'Service #1' it then pushes the box to first open line which is where the 'my principles' box ends and if you look closely you will see the 'Service 1' is aligned more in the middle of the screen. I believe the problem could be fixed by adding one or two blank lines below 'my promise' simply insert <p></p> just before the </div> tag
    These things drive me nuts as well so you are not alone
    Hopefully this will help
    David
    {{ DiscussionBoard.errors[1943826].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by davidsbain View Post

      Steve,
      I am not an expert in this so I could be wrong. Here is what I think is the problem. The 'my principles' is longer than the 'my promise' so when it goes to place 'Service #1' it then pushes the box to first open line which is where the 'my principles' box ends and if you look closely you will see the 'Service 1' is aligned more in the middle of the screen. I believe the problem could be fixed by adding one or two blank lines below 'my promise' simply insert <p></p> just before the </div> tag
      These things drive me nuts as well so you are not alone
      Hopefully this will help
      David
      You were close to right, the problem is that the <UL> and the <P> in each column are not the exact same height. There have the same amount of lines in the browser but the <UL> is about 1/2 a line longer than the <p>, so I just decided to make a <UL> on the right hand side and equal them out, so it should look fine now.....

      Although it would be great to know HOW to do it with the paragraph instead of the <UL> so that next time I have a choice or maybe I can change it, maybe someone will chime in that knows how to correct it.......

      Again thanks for your help..........
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[1943937].message }}
  • Profile picture of the author IM-Info
    Is it been corrected? I couldn't see the problem...
    {{ DiscussionBoard.errors[1943835].message }}
  • Profile picture of the author woodsja
    looks like you got it fixed. If you're still having problems PM me.
    {{ DiscussionBoard.errors[1943878].message }}
  • Profile picture of the author davidsbain
    The correct way to do it would be to set up a seperate div id. For your boxes all the way down it is fine to use the same div class as they are all the same size but when you have different sizes on the left and right then you need to put them into a seperate div so that the div line ends at the longest box. Its very easy to take shortcuts but they cause chaos. I know.... I try to do it all the time. lol
    {{ DiscussionBoard.errors[1944081].message }}
  • Profile picture of the author gyanart
    Hi Steve,

    I am CSS experienced person and I have done more than 40 websites using css and many of them were very complicated.

    I have checked in ie7 and ie6 and see lot of problems in ie6. I can fix problems for ie6. PM me
    {{ DiscussionBoard.errors[1945476].message }}

Trending Topics