Need Some Simple Help With HTML/CSS

by 6 replies
7
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
#website design #html or css #simple
  • 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
    • [1] reply
    • 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..........
  • Is it been corrected? I couldn't see the problem...
  • looks like you got it fixed. If you're still having problems PM me.
  • 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
  • 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
Join the discussion

Next Topics on Trending Feed

  • 7

    Need Some Simple Help With HTML/CSS

    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.