IE7/FF3 simple div content displayed different

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
SuperFly
Forum Newbie
Posts: 19
Joined: Thu Nov 10, 2005 9:47 am
Contact:

IE7/FF3 simple div content displayed different

Post 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
Attachments
FF3.JPG
FF3.JPG (89.07 KiB) Viewed 4502 times
IE7.JPG
IE7.JPG (76.05 KiB) Viewed 4503 times
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: IE7/FF3 simple div content displayed different

Post by Eran »

Dude, you could have just captured the area of the div ;)

What are the image dimensions?
mintedjo
Forum Contributor
Posts: 153
Joined: Wed Nov 19, 2008 6:23 am

Re: IE7/FF3 simple div content displayed different

Post 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;
 }
SuperFly
Forum Newbie
Posts: 19
Joined: Thu Nov 10, 2005 9:47 am
Contact:

Re: IE7/FF3 simple div content displayed different

Post 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 ;)
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: IE7/FF3 simple div content displayed different

Post 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;
}
 
SuperFly
Forum Newbie
Posts: 19
Joined: Thu Nov 10, 2005 9:47 am
Contact:

Re: IE7/FF3 simple div content displayed different

Post 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
Attachments
ie7-2.JPG
ie7-2.JPG (23.98 KiB) Viewed 4459 times
FF3-2.JPG
FF3-2.JPG (23.85 KiB) Viewed 4460 times
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: IE7/FF3 simple div content displayed different

Post 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;
}
 
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: IE7/FF3 simple div content displayed different

Post 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.
Post Reply