1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

IE8 float problem

Discussion in 'CSS' started by Business Attorney, Sep 12, 2010.

0
  1. #1
    This page: http://www.stlouistravelguide.info/st-louis-travel-tips.php and other similar pages on this site display fine in Firefox and Chrome, but the right content starts below the left sidebar in IE8.

    Getting to the basics, the structure is 

    <body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
   <td height="167" valign="top" class="header2">
      <div class="contentwrapper">
         <div class="left">
         some content
         </div>
         <div class="right">
         some more content
         </div>
      </div>
   </td>
</tr>
</table>
</body>
    Code (markup):
    The relevant CSS is:

    body {
	background-image: url(/images/bg.jpg);
	background-repeat: repeat-x;
	background-color: #0099ff;
}
.header2 {
	background-image: url(/images/st-louis-travel_r3_c1.jpg);
	background-repeat: repeat-y;
}
.contentwrapper {
	vertical-align: top;
	background-image: url(/images/st-louis-travel_r3_c1.jpg);
	background-repeat: repeat-y;
	width: 800px;
}
.left {
	float: left;
	width: 210px;
	margin-left: 14px;
	display: inline
}
.right {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	padding-left: 10px;
	width: 790px;
}
    Code (markup):
    I added the width elements to the contentwrapper and right classes to solve a previous problem that the right text was not staying within the borders of the table. I added the inline element to left class based on my reading of a potential fix (which obviously did not work).

    I tried various lesser widths for the right class, but all that did was narrow the text column, so that doesn't appear to be the problem.

    Any ideas?
     
    Business Attorney, Sep 12, 2010 IP
  2. bhuthecoder

    bhuthecoder Member

    Messages:
    245
    Likes Received:
    11
    Best Answers:
    1
    Trophy Points:
    43
    #2
    modified css

    line 28
    
.right {
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-left:10px;
width:560px;
}
    Code (markup):
    line 225
    
padding:5px 20px 5px 0;
    Code (markup):
     
    bhuthecoder, Sep 12, 2010 IP
  3. Alexwhin

    Alexwhin Active Member

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    58
    #3
    I hate seeing problems like this. I hope bhuthecoder has solved your issue. I wish IE would bulk up their design and programming "know how" and build a decent browser. You would think after years of developers and designers (even regular internet users) switching to FireFox/Safari/Chrome they would get the hint.

    I know this sounds a little straight up, but I encounter IE styling problems everyday and it can get a little tedious.
     
    Alexwhin, Sep 12, 2010 IP
  4. Business Attorney

    Business Attorney Active Member

    Messages:
    621
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    70
    #4
    bhuthecoder, thanks for the detailed suggestion, but I tried it and the text of the content still falls below the left sidebar in IE. It still looks fine after the changes in Chrome and Firefox. I am leaving the changes in, even though they didn't work...
     
    Business Attorney, Sep 12, 2010 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi,

    Why have you got your layout in a table? Also remove display:inline; from left, and reduce the widths a bit temporarly just to ensure the column isn't dropping because of there not being enough space!
     
    wd_2k6, Sep 14, 2010 IP
  6. Business Attorney

    Business Attorney Active Member

    Messages:
    621
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    70
    #6
    I didn't design the layout, so I can't say why the designer used a table. I was just seeing if I could fix it.

    I put the "display:inline;" in because I read that it fixed a different float problem in IE7 and I thought I would give it a shot to see if it fixed this problem in IE8. It seems to have no effect on how any browser displays the page.

    I did temporarily reduce the widths, much more than just "a bit," and all that did was make the columns very narrow. The right column still followed under the left column.

    Funny, I left the site untended for 2 years after I bought it but I think I looked at it at that time. I don't remember this being a problem in IE7, but I usually use Firefox so it is possible I never viewed it in IE before now. I assume if it doesn't display correctly in IE8 it also doesn't work in IE7 or earlier, but I have removed those browsers from all my computers, so I can't be sure.
     
    Business Attorney, Sep 14, 2010 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi,

    Well tables for layouts is a bit old school and most people just use DIV based layouts with CSS to control the presentation, yours has a bit of both I guess.
    I think the display:inline; gets ignored by all browsers apart from IE6 since floating it makes it a block element regardless so I guess you can leave it in.

    Anyway I had a further look and I think it's because you are having content in your .left and .right sections which is wider than the width constraints you have put on these sections. For example add overflow:auto; to your .left and .right temporarliy and the problem should dissapear in IE8 and you can visually see why.

    For example your first problem is that .left is set at 310px width , but you have .topsidebar which is a child of .left set at 312px width.
    Your other problem is that .right is set at 560px width, however you have an adsense ad in there set at 728px width!
     
    wd_2k6, Sep 15, 2010 IP
    Business Attorney likes this.
  8. Business Attorney

    Business Attorney Active Member

    Messages:
    621
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    70
    #8
    Thanks for the tip on overflow:auto; and for pointing out the specific width problems. Now that I can visually see what is going on, it will help me resolve the issues when I get back to it tonight.
     
    Business Attorney, Sep 15, 2010 IP
  9. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Np, I think the 2 problems with topsidebar and the ad I mentioned should solve the problem
     
    wd_2k6, Sep 15, 2010 IP
  10. kungcindysung

    kungcindysung Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Check size all both width and height.Test again..
     
    kungcindysung, Sep 15, 2010 IP
  11. david.rew1164

    david.rew1164 Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Also use float: left for the right column also.

    thanks
     
    david.rew1164, Sep 30, 2010 IP
  12. anupviews

    anupviews Member

    Messages:
    795
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    35
    #12
    Going good?

    The pain problem you are having with is these:

    .left {
    float: left;
    width: 210px;
    margin-left: 14px;
    display: inline
    }
    .right {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    padding-left: 10px;
    width: 790px;
    }

    Your content wrapper can have maximum width:800px as you've mentioned in your css.
    But you've already added 210 PX for left div and 790px for right one. This makes 1000px which cannot be accommodated in 800px width. That is why your second div is moving just below the left div.

    To get rid of this problem change the above code to this.
    .left {
    float: left;
    width: 200px;
    margin-left: 14px;
    display: inline
    }
    .right {
    font-family: Arial, Helvetica, sans-serif;
    float:right;
    font-size: .8em;
    padding-left: 10px;
    width: 500px;
    }

    Remember i've just modified the width for .left and width+float in .right.

    This will do the job for you.

    Further I request you to put following div next to .right div.

    <div style="clear:both;"/>

    Hope this helps.
     
    anupviews, Oct 7, 2010 IP