Solved

bottom margin in div in ie6, no bottom margin if FF or Chrome

Posted on 2009-03-30
6
801 Views
Last Modified: 2012-06-27
I have a web page with a "container" and an image inside the container.  I am trying to get the image to display with white space on both sides but no white space on the top or bottom.  The code below works perfect in FireFox and Chrome but in Internet Explorer 6, it has a 10 pixel margin or white space below the image.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Rounded Corners Revisted</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {
padding: 0px;
margin: 0px;
}
html {
overflow-y: scroll; /* scrollbar fix */
}
body {
margin: 0px;
padding: 0px;
background-color: #023568;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;
padding: 0px 0px 0px 0px;
}
 
#container {
background-color: #FFFFFF;
font-size: 0.75em;
overflow: hidden;
width: 580px;
margin: 0 auto;
}
* html #container {
height: 1%;
}
 
.tl {
background-image: url(circle-white-blue.jpg);
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.tr {
background-image: url(circle-white-blue.jpg);
background-position: 10px 0px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}
.bl {
background-image: url(circle-white-blue.jpg);
background-position: 0px 10px;
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.br {
background-image: url(circle-white-blue.jpg);
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}
</style>
</head>
<body>
<div id="container">
<span class="tl"></span><span class="tr"></span>
<div style='width: 425px; height:344px; margin-left: auto; margin-right: auto; margin-bottom: 0px;'>
<img src="images/mano-logo-videosNEW425x344.jpg" width="425" height="344">
</div>
<span class="bl"></span><span class="br"></span>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:RC123
  • 4
  • 2
6 Comments
 

Author Comment

by:RC123
ID: 24019684
Sorry, I forgot to include the image files needed to view the htm properly.
circle-white-blue.jpg
mano-logo-videosNEW425x344.jpg
bad-bottom-margin.JPG
what-it-should-look-like.JPG
0
 
LVL 30

Expert Comment

by:LZ1
ID: 24019943
The first thing I would recommend is making a separate ID for the image DIV.  And then putting your CSS in their rather than inline.  
let me know if that works. I tried it on my end, and it looked ok.
0
 

Author Comment

by:RC123
ID: 24020684
Do you mean like this: ??

background-image: url(circle-white-blue.jpg);
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}

#logoImage {
style='width: 425px;
height:844px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<span class="tl"></span><span class="tr"></span>
<div id="logoImage">
<img src="images/mano-logo-videosNEW425x344.jpg" width="425" height="344">
</div>
<span class="bl"></span><span class="br"></span>
</div>
</body>
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 30

Expert Comment

by:LZ1
ID: 24020760
Yes, just like that.
0
 

Author Comment

by:RC123
ID: 24020966
It doesn't work in IE 6.0
0
 

Accepted Solution

by:
RC123 earned 0 total points
ID: 24139393
I think that maybe this cannot done because the various browsers are too different.
0

Featured Post

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question