Log in

View Full Version : Resolved extra space in IE


corypark
11-18-2008, 03:52 AM
I'm trying to use a suckerfish CSS Dropdown menu but it is creating extra unwanted space beneath it in IE. I'm out of ideas:confused:.. and my search for solutions was fruitless.... please help

page: http://intuitechinc.com/jammies/menuTest2.html

css:

ul {
list-style: none;
padding: 0;
margin: 0;
background-color:#009933;
}

#nav a {
font-weight: bold;
color: #ffffff;
text-decoration: none;
}

#nav li li a {
display: block;
font-weight: normal;
color: #fff;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 5px;
background-color: #CC6666;
}

li {
float: left;
position: relative;
width: 161px;
text-align: center;
cursor: default;
background-color: #996666;
border: 1px solid #fff;
border-left: none;
}
li#farLeft {
border-left: solid 1px #fff;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #996666;
font-weight: normal;
padding: 0.5em 0 1em 0;
border: solid 1px #fff;
border-top: none;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}
#mainTbl{
width:100%;
text-align:center;
}
#container {
width: 700px;
text-align:center;
background-color: #fff;
padding: 15px auto;
margin:auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 700px;
}
#header {
width:659px;
background:#666666;
border: solid 2px #CCCCCC;
text-align: center;
padding-top: 20px;
margin: auto;
margin-bottom: 20px;
}
#images {
background:#FFFFFF;
margin: 15px auto 20px auto;
width: 612px;
padding-left: 3px;
}
#images img {
margin: 3px 3px 3px 0;
}
#navTop {
width:650px;
margin:0;
clear:both;
font-size: 12px;
}
#content {
border: solid #999999 2px;
width: 650px;
margin: auto;
}

hr {
display: none;
}
.page {
width: 718px;
margin: 25px auto;
text-align: center;
background-color:#FFFFFF
}
.header {
margin: 20px auto 20px auto;
padding: 15px 0 0 0;
padding-bottom: 0px;
background-color:#666;
text-align:center;
border:#333 ridge 2px;
}

html:

<table class="page" align="center" width="718" border="0">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<td>In
<div id="images"><img class="right" src="images/coffee.jpg" /><img src="images/calendar.gif" /><img src="images/cell.jpg" /><img src="images/writing.jpg" /><img src="images/traffic.gif" /><img src="images/package.jpg" /><img src="images/keyboard.jpg" /><img src="images/watch.jpg" /><img src="images/paperwork.jpg" />
</div>

<div><ul id="nav"><li id="farLeft"><a href="">Help Resources </a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li>
</ul>
</li>
<li><a href="">Products &amp; Services</a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li>
</ul>
</li>
<li><a href="">Help Us Help You </a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li>
</ul>
</li>
<li><a href="">Advertise in IYJ </a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li></ul></li></ul></div></td></tr></table>
</td>
</tr>
</table>

THanks:)
monicasaha
11-18-2008, 05:03 AM
make img display:block;
corypark
11-18-2008, 05:16 AM
that does nothing... thanks though;)

anybody?
monicasaha
11-18-2008, 05:32 AM
ok add this code in your css this will definately work.


img, div{
padding:0;
margin:0;
border:0;

}

#images {
background:#FFFFFF;
margin: 15px auto 20px auto;
width: 612px;
padding:3px;
overflow:hidden;
}

#images img{
display:block;
float:left;
}
monicasaha
11-18-2008, 06:57 AM
sorry at first i got the prob with ur images...now i have done with ur bottom margin of ur dropdownmenu..
here is the css code


img, div, ul, li, a{
padding:0;
margin:0;
}

.spacer{
font-size:0;
line-height:0;
clear:both;
}
ul {
list-style-type: none;
background-color:#009933;

}
#nav{
margin:0;
padding:0;
}

#nav a {
font-weight: bold;
color: #ffffff;
text-decoration: none;
}

#nav li li a {
font-weight: normal;
color: #fff;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 5px;
background-color: #CC6666;
}

li {
float: left;
position: relative;
width: 161px;
text-align: center;
cursor: pointer;
background-color: #996666;
border: 1px solid #fff;
border-left: none;
}
li#farLeft {
border-left: 1px solid #fff;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #996666;
font-weight: normal;
padding: 0.5em 0 1em 0;
border: solid 1px #fff;
border-top: none;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}
#mainTbl{
width:100%;
text-align:center;
}
#container {
width: 700px;
text-align:center;
background-color: #fff;
padding: 15px auto;
margin:auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 700px;
}
#header {
width:659px;
background:#666666;
border: solid 2px #CCCCCC;
text-align: center;
padding-top: 20px;
margin: auto;
margin-bottom: 20px;
}
.header #images {
background:#FFFFFF;
margin: 15px auto 20px auto;
width:609px;
padding:3px;
overflow:hidden;
}

#images img{
display:block;
float:left;
margin-right:3px;
}
.norightmargin{
margin-right:0!important;
}
#navTop {
width:650px;
margin:0;
clear:both;
font-size: 12px;
}
#content {
border: solid #999999 2px;
width: 650px;
margin: auto;
}

hr {
display: none;
}
.page {
width: 718px;
margin: 25px auto;
text-align: center;
background-color:#FFFFFF
}
.header {
margin:20px auto;
background-color:#666;
padding: 15px 0 0 0;
text-align:center;
border:2px solid #333;
}

and html


<table border="0" cellpadding="0" cellspacing="0" class="header">
<tr>
<td>In
<div id="images"><img src="images/coffee.jpg" width="65" height="80" /><img src="images/calendar.gif" width="65" height="80" /><img src="images/cell.jpg" width="65" height="80" /><img src="images/writing.jpg" width="65" height="80" /><img src="images/traffic.gif" width="65" height="80" /><img src="images/package.jpg" width="65" height="80" /><img src="images/keyboard.jpg" width="65" height="80" /><img src="images/watch.jpg" width="65" height="80" /><img src="images/paperwork.jpg" width="65" height="80" class="norightmargin" /> </div>

<div style="height:15px;"><ul id="nav"><li id="farLeft"><a href="">Help Resources </a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li>
</ul>
</li>
<li><a href="">Products &amp; Services</a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li>
</ul>
</li>
<li><a href="">Help Us Help You </a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li>
</ul>
</li>
<li><a href="">Advertise in IYJ </a>
<ul>
<li><a href="">thing 1</a></li>
<li><a href="">thing 2</a></li>
<li><a href="">thing 3</a></li>
<li><a href="">thing 4</a></li>
<li><a href="">thing 5</a></li></ul></li></ul></div></td></tr></table>

add this table i hope this will solve ur prob.
corypark
11-18-2008, 08:32 AM
cool! thanks... what was wrong with the pictures?
monicasaha
11-18-2008, 08:49 AM
my pleasure..
at first images were also showing extra space below.. in IE 6... that is why i got misguided