PDA

Click to See Complete Forum and Search --> : Bottom border not showing up in IE

mizas
11-02-2007, 02:49 PM
in my HTML I have

<div class="feeds">
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div id="showhide">
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</div>
</div>

and the style is

.feeds{
border:2px #003366 solid;
}


The whole border appears around the feeds div fine in Firefox. But there is no bottom border in IE. The show hide area toggles between display:none/block through JS. But why would a hidden div inside another div effect the outer div's border in IE?
Fang
11-02-2007, 02:54 PM
Is that the complete css or is there some floating?
mizas
11-02-2007, 03:02 PM
It's not the entire css but there isn't anything floating.
Fang
11-02-2007, 03:03 PM
What you've given works correctly.
mizas
11-02-2007, 03:12 PM
Here is the full source and css. I cut out a lot of repetitiveness to make it easier to read though:


<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="feeds">
<div class="feedItemEven">
<a href="http://graphicssoft.about.com/b/2007/10/31/corel-painter-essentials-4-for-windows-and-mac-2.htm">
<span class="subject">
Corel Painter Essentials 4 for Windows and Mac
</span>
</a>
</div>
<div class="feedItemOdd">
<a href="http://graphicssoft.about.com/b/2007/10/30/acdsee-26-off-today-fontcreator-coming-up.htm">
<span class="subject">
ACDSee 26% Off Today, FontCreator Coming Up
</span>
</a>
</div>
<div id="includesnewsExtras" style="display:none;">
<div class="feedItemOdd">
<a href="http://graphicssoft.about.com/b/2007/10/16/fall-and-halloween-digital-scrapbooking-kits.htm">
<span class="subject">
Fall and Halloween Digital Scrapbooking Kits
</span>
</a>
</div>
</div>
</div>

</body>
</html>



/** RSS Portlet **/
div.feeds {
border: 2px #003366 solid;
background-color:#FFFFFF;
}
div.feedItemOdd, div.feedItemEven {
margin:.1em 0;
display:block;
}
div.feedItemOdd {
background-color: #FFFFFF;
}
div.feedItemEven {
background-color: #E7FAEB;
}
div.feedItemOdd a, div.feedItemEven a {
display:block;
padding:.2em .5em;
color:#000;
}
div.feedItemOdd a:hover, div.feedItemEven a:hover {
background-color:#C9D4EA;
}

div.feedItemOdd div.feedItemContent, div.feedItemEven div.feedItemContent {
padding:0 .5em;
}
upand_at_them
11-02-2007, 03:26 PM
I can tell you which style is causing it:

div.feedItemOdd a, div.feedItemEven a {
display:block;
padding:.2em .5em;
color:#000;
}
mizas
11-02-2007, 03:43 PM
Ah, thanks! I changed the padding to be in div.feedItemOdd and div.feedItemEven and it looks good in both IE and Firefox now.