HTML, CSS and anything else that deals with client side capabilities.
Moderator: General Moderators
SuperFly
Forum Newbie
Posts: 19 Joined: Thu Nov 10, 2005 9:47 am
Contact:
Post
by SuperFly » Fri Nov 28, 2008 11:04 am
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 (89.07 KiB) Viewed 4499 times
IE7.JPG (76.05 KiB) Viewed 4500 times
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Fri Nov 28, 2008 11:11 am
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
Post
by mintedjo » Fri Nov 28, 2008 11:14 am
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:
Post
by SuperFly » Fri Nov 28, 2008 11:23 am
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
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Fri Nov 28, 2008 11:49 am
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:
Post
by SuperFly » Sat Nov 29, 2008 5:25 am
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">
</div>
</div>
Thanks for any help.
Regards
Attachments
ie7-2.JPG (23.98 KiB) Viewed 4456 times
FF3-2.JPG (23.85 KiB) Viewed 4457 times
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Sat Nov 29, 2008 9:40 am
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;
}
greyhoundcode
Forum Regular
Posts: 613 Joined: Mon Feb 11, 2008 4:22 am
Post
by greyhoundcode » Sat Nov 29, 2008 9:48 am
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.