Page 1 of 1

IE7/FF3 simple div content displayed different

Posted: Fri Nov 28, 2008 11:04 am
by SuperFly
Hi everyone,
I have one probably stupid problem that I don't know how to solve. In attachment you can see how is same simple code
displayed differently in IE7 AND FF3. Here is the code:

CSS Code:

Code: Select all

<style>
html{
    background-color: #A9A9A9;
}
.cclogo{
    height:31px;
    position:absolute;
    top:268px;
    left: 138px;
    width:920px;
    border:1px solid #000;
}
 
.cclogoimage{
    height:31px;
    position:absolute;
    left: 138px;
   
}
</style>
<div class="cclogo">
    <img class="cclogoimage" src="images/cc_footer.png" class="cclogo">
</div>

The problem is that image should be inside borders, or at least to be displayes on same way in both browsers.

Any help appriciated
Thanks

Re: IE7/FF3 simple div content displayed different

Posted: Fri Nov 28, 2008 11:11 am
by Eran
Dude, you could have just captured the area of the div ;)

What are the image dimensions?

Re: IE7/FF3 simple div content displayed different

Posted: Fri Nov 28, 2008 11:14 am
by mintedjo
You can always use the common ie hack...

Code: Select all

.cclogo{
     height: 31px !important;
     height: 33px;
     position:absolute;
     top:268px;
     left: 138px;
     width:920px;
     border:1px solid #000;
 }

Re: IE7/FF3 simple div content displayed different

Posted: Fri Nov 28, 2008 11:23 am
by SuperFly
pytrin wrote:Dude, you could have just captured the area of the div ;)

What are the image dimensions?
Sorry for image dimensions :)
image in div is: 630x31

Thanks for reply ;)

Re: IE7/FF3 simple div content displayed different

Posted: Fri Nov 28, 2008 11:49 am
by Eran
You are overusing the absolute positioning scheme. If you let the image use relative positioning, or even position it using the margin property, you can remove the height attribute from the div and let it flow around the image, assuming its height.

Code: Select all

 
 .cclogo{
     position:absolute;
     top:268px;
     left: 138px;
     width:920px;
     border:1px solid #000;
}
.cclogoimage{
     height:31px;
     margin-left: 138px;
}
 

Re: IE7/FF3 simple div content displayed different

Posted: Sat Nov 29, 2008 5:25 am
by SuperFly
Thanks for your help, I have manage to solve previous problem, but now I have this one:

Code: Select all

<style>
html{
    background-color: #A9A9A9;
}
 
#bannerchild{
    position:absolute;
    top:95px;
    left:138px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width:920px;
}
 
 
#indexmenulinksbackground {
    position:absolute;
    background-image:url("images/homepage-images/bannermenu-back.png");
    background-repeat: repeat-x;
    height:42px;
    width:920px;
    top:426px;
    left:138px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
 
</style>
 
<div id="maincontent">
    <div id="bannerchild">
        <img src="images/homepage-images/banner-child.jpg" border="0">
    </div>
    <div id="indexmenulinksbackground">
        &nbsp;
    </div>
</div>
Thanks for any help.

Regards

Re: IE7/FF3 simple div content displayed different

Posted: Sat Nov 29, 2008 9:40 am
by Eran
I'm guessing the difference is due to the image width (firefox will crop to maintain the width style, while IE7 will not). Either way you can use a simple hack or play more with the width of the containers:

Code: Select all

 
#indexmenulinksbackground {
     position:absolute;
     background-image:url("images/homepage-images/bannermenu-back.png");
     background-repeat: repeat-x;
     height:42px;
     width:920px;
     * width:922px; /* IE hack */
     top:426px;
     left:138px;
     border-left: 1px solid #000;
     border-right: 1px solid #000;
}
 

Re: IE7/FF3 simple div content displayed different

Posted: Sat Nov 29, 2008 9:48 am
by greyhoundcode
I'm no CSS guru so I could be way off-beam here, but there is also the overflow property you might use, as in

.mycssclass
{
overflow: hidden;
}

and then if the content exceeds the bounds it gets neatly cropped.