IE 6/7 Layout issue when page changed

HTML & CSS
1

Hi -
I have just changed this page so the h3 and the text display on the right instead of the left of the page, as the client wanted a different background image.

http://www.shoplilygirl.com/about

Before the changes it worked in all browsers. It now displays fine on (my) Mac and Windows, Firefox, Safari, IE 9 & 8 but IE 6 & 7 are not displaying the right column correctly (still learning their requirements).

I’m sure it is something simple but could use another pair of eyes on it to see what I apparently am missing.

Thanks for any help you can give me!

2

Setting a width on the #meetgirls div and floating it to the right might do the trick, your paragraphs are pushing the width of that div out, so you could also try something like

#meetgirls p {
  width:255px;
  float:right;
}

(and you might need to add an overflow:hidden to the #meetgirls div as well…

3

Thanks, but did not resolve the issue. It appears it may be something with the h3 tag or style. If a remove it then the text displays in a column to the right, but when it’sn there it all get pushed below the left img and the right img gets pushed down as well.

4

Hi,
Go ahead and float that h3 to the right also. But it has a 465px left margin that needs to be removed as well.

#meetgirls p {
  width:250px;
 [COLOR=Blue] float:right;[/COLOR]
}

#meetgirls h3{
    background-image: url(/images/about_title2.jpg);
    background-position: 0 30px;
    background-repeat: no-repeat;
    height: 37px;
    [COLOR=Red]/*margin: 0 0 4px 465px;*/[/COLOR]
    padding-top: 30px;
    width: 275px;
     [COLOR=Blue]float:right;[/COLOR]
}

#meetgirls #pic{
    display: inline;
    [COLOR=Blue]float: left;[/COLOR]
    margin-right: 40px;
}
5

Thanks for the help but the solution above did not resolve either. It messed it up in all browsers.

I took another tack and have it on a test page: http://www.shoplilygirl.com/about2
I inserted the image in the h3 tag on the page
<h3><img src=“/images/about_title2.jpg” /></h3>
instead of in the style and changed the style - code is below. It works now in all but IE7 - which is not displaying the image on the right - I just have white space.
#meetgirls2{
background-color: #539E92;
background-image: url(/images/about_girls_r.jpg);
background-position: right bottom;
background-repeat: no-repeat;
///
#meetgirls2 p {
width:257px;
float:right;
overflow:hidden;
}

#meetgirls2 h3{
height: 37px;
margin: 0 0 4px 0px;
padding-top: 30px;
float:right;
}

#meetgirls2 #pic{
display: inline;
float: left;
margin-right: 0px;
}

6

It works now in all but IE7 - which is not displaying the background image on the right - I just have white space.
That’s because you tampered with the clearfix rules. You used inline-table for IE6/7 but they do not understand it.

It should have been inline-block

---------- Clearfix ----------
*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

[COLOR=Red]/*---.clearfix {display: inline-table;}---*/[/COLOR]
[COLOR=Blue].clearfix {display: inline-block;}[/COLOR]

/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Though you really don’t even need to be using the clearfix method for that page. A simple width for IE6/7 on the parent would have tripped “haslayout” and contained your floats. Then overflow:hidden would have contained floats for modern browsers.


---------- About Us Styles ----------
*/

#meetgirls{
    background-color: #539E92;
    background-image: url(/images/about_girls_r.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;
    color: #031c2f;
    padding-right: 30px;
    font-size:12px;
    line-height:18px;
    text-align:right;

    [COLOR=Blue]width:738px;[/COLOR] /*768px total with right padding (IE6/7 haslayout)*/
   [COLOR=Blue] overflow: hidden;[/COLOR]/*modern browsers*/
}

As far as the original problem goes: I would have just floated in a right column (with a width) and then just nested the h3 and p tags in it. Then there would have been no need for setting individual widths on the h3 and p or any other elements that may go in it. :slight_smile:

7

Thank you all so much for your help!

Rayzur - Thank you for your suggestions and explanations. All is much clearer now. I had to adjust some of the padding but it is now displaying as I want.
I will also take a look at your alternative “As far as the original problem goes: I would have just floated in a right column” and see how that works.

Thanks again!