PDA

View Full Version : internet explorer css display error


nick007x
09-14-2007, 05:26 AM
Thanks a lot for any help. This may just be a small thing, but I don't see it and its driving me insane trying to figure it out. I do not have the site i'm building uploaded to the server yet, its just on my local machine if that makes a difference. Everything looks good when I preview the page in Firefox, however when I preview it in Internet Explorer there is either a white line or a space separating the banner and the side navigation bar. This is a problem because the the bottom of the banner and the side navigation bar are part of a single graphic design element.

Here's the applicable code from the page:


body {
background-color: #666666;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="containerstyle.css" rel="stylesheet" type="text/css" />
<link href="bannerstyle.css" rel="stylesheet" type="text/css" />
<link href="navtopstyle.css" rel="stylesheet" type="text/css" />
<link href="contentstyle.css" rel="stylesheet" type="text/css" />
<link href="oakstyle.css" rel="stylesheet" type="text/css" />
<link href="mainstyle.css" rel="stylesheet" type="text/css" />
<link href="footerstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="banner"><img src="images/Banner.jpg" alt="Allon Investment Group, LLC." width="1003" height="154" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="174,29,614,111" href="index.html" alt="Home Link" />
<area shape="circle" coords="106,65,60" href="index.html" alt="Home Link" />
</map></div>


<div id="main">
<div id="navbar">
<div id="navtop"><img src="images/homepage_navtop.jpg" alt="Home" width="215" height="131" /></div>

The white space (~10 pixels) is under banner.jpg, between it and navtop.jpg, which is directly under the banner on the left side of the page.


Here's my css for the banner:

#banner {
width: 1003px;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
}


the navtop css:

#navtop {
margin: 0px;
padding: 0px;
width: 215px;
}


again, it looks fine in firefox. If anyone sees the problem I would greatly, greatly appreciate it. Or perhaps is it just a problem i'm seeing in the preview that ie won't actually display once its up on the server? Thanks in advance-

domedia
09-14-2007, 04:07 PM
try adding this:
#navtop img,
#banner img {display: block}

I think IE adds space to an inline element, which images are by default. If we change this to block elements instead, I think the space might dissapear.

nick007x
09-15-2007, 06:10 AM
domedia, thanks very much for the reply. Do you mean add display:block to the banner css? or are you talking about adding that code to the main page file? If so, where exactly? Sorry if thats a retarded question, please bear with me.

domedia
09-15-2007, 07:50 PM
Just add it as some new lines where your code for #banner and #navtop is :)