PDA

View Full Version : Problem with tables in IE


masears88
12-05-2008, 06:22 PM
Hi, i have set up a drop down using a table and divs. My problem is that when i preview the page in firefox it looks perfect, but when i look at it in IE it puts space between the 2 columns and a little space between the rows. I have a css file that is controlling the layout. I have set all borders for the table, the row, and the cell to 0, as long with the padding and margin to 0. Can anyone help me with this? Thanks.

coloeagle
12-05-2008, 06:28 PM
Possible to get a url to view the page/problem.

Chapo
12-06-2008, 04:00 PM
This is a problem of everyday when we try different browers, but it could be solved if he had a link to view the site or code.

masears88
12-09-2008, 03:04 PM
I don't have it up to put it on a site but i can show you the code the code in the highlight is the table that im using. I will also put the css at the bottom of the page and highlight the code used for this table. :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" href="../images/GGTICON.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../apps/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body id="body">
<div id="wrapper">
<div id="header">
<div id="headerlogo"><a href="#"></a></div>
<div id="space" onmouseover="MM_showHideLayers('clear','','hide','branddropdown ','','hide','trailertypedropdown','','hide')"></div>
<div id="dropdownnav">
<div id="buttons">
<div id="clear" onmouseover="MM_showHideLayers('clear','','hide','branddropdown ','','hide','trailertypedropdown','','hide')"><a href="#"></a></div>
<div id="btnhome"><a href="#"></a></div>
<div id="btnbrand" onmouseover="MM_showHideLayers('clear','','show','branddropdown ','','show','trailertypedropdown','','hide')"><a href="#"></a></div>
<div id="branddropdown">
<ul>
<li><a href="#">Featherlite</a></li>
<li><a href="#">Hudson</a></li>
<li><a href="#">Southern Sales</a></li>
<li><a href="#">Continetal Cargo</a></li>
<li><a href="#">JLG</a></li>
<li><a href="#">Pace</a></li>
<li><a href="#">Carry-On</a></li>
<li><a href="#">Bri-Mar</a></li>
<li><a href="#">Haulmark</a></li>
</ul>
</div>
<div id="btntrailer" onmouseover="MM_showHideLayers('clear','','show','branddropdown ','','hide','trailertypedropdown','','show')"><a href="#"></a></div>
<div id="trailertypedropdown">
<ul>
<table id="trailertypetable" width="400" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><li id="typehorse"><a href="#" id="typehorselink"></a></li></td>
<td valign="top"><li id="typehorselivng"><a href="#"></a></li></td>
</tr>
<tr>
<td valign="top"><li id="typelivestock"><a href="#"></a></li></td>
<td valign="top"><li id="openuty"><a href="#"></a></li></td>
</tr>
<tr>
<td valign="top"><li id="typeenclosedcar"><a href="#"></a></li></td>
<td valign="top"><li id="typeopencar"><a href="#"></a></li></td>
</tr>
<tr>
<td valign="top"><li id="typeequip"><a href="#"></a></li></td>
<td valign="top"><li id="typehde"><a href="#"></a></li></td>
</tr valign="top">
<tr>
<td valign="top"><li id="typelowdump"><a href="#"></a></li></td>
<td valign="top"><li id="typedump"><a href="#"></a></li></td>
</tr>
<tr>
<td valign="top"><li id="enclcargo"><a href="#"></a></li></td>
<td valign="top"><li id="enclemotor"><a href="#"></a></li></td>
</tr>
<tr>
<td valign="top"><li id="vending"><a href="#"></a></li></td>
<td valign="top">&nbsp;</td>
</tr>
</table>
</ul>
</div>
<div id="btnhomeliving"><a href="#"></a></div>
<div id="btnused"><a href="#"></a></div>
<div id="btncontact"><a href="#"></a></div>
</div>
</div>
<div id="location"><!-- TemplateBeginEditable name="location" -->Content for id &quot;location&quot; Goes Here<!-- TemplateEndEditable --></div>
<div id="subnav"><!-- TemplateBeginEditable name="subnav" -->Content for id &quot;subnav&quot; Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="sidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Parts</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Rentals</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="main"><!-- TemplateBeginEditable name="MainContent" -->Content for id &quot;main&quot; Goes Here<!-- TemplateEndEditable --></div>
<div id="footer">
<div id="footernav"><a href="#">Home</a> | <a href="#">Service</a> | <a href="#">Rentals</a> | <a href="#">Financing</a> | <a href="#">Site Map</a> | <a href="#">Contact Us</a></div>
<div id="footerlogo"><a href="#"><img src="../images/spacer.gif" width="200" height="70" alt="GGT Home Page" /></a></div>
</div>
</div>
</body>
</html>


@charset "utf-8";

#body {
padding: 0px;
margin: 0px;
background-color: #CCC;
}
a:link, a:visited {
color: #FFF;
}


a:hover, a:active {
color: #F00;
}


/* CSS Document */
#wrapper {
width: 1000px;
text-align: left;
display: block;
background-color: #FFF;

}
#header {
margin: 0px;
padding: 0px;
height: 333px;
background-image: url(../images/TopBannerGGT3.jpg);
background-repeat: no-repeat;
}
#headerlogo {
margin: 0px;
padding: 0px;
float: left;
height: 155px;
width: 400px;
border: none;
}
#body #wrapper #header #headerlogo a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
padding: 0px;
}

#space {
margin: 0px;
padding: 0px;
float: left;
width: 1000px;
height: 60px;
}
#dropdownnav {
margin: 0px;
width: 800px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
float: left;
height: 48px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 200px;
color: #FFF;
}
#buttons {
float: left;
width: 800px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 35px;
padding-top: 7px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#clear {
position: absolute;
visibility: hidden;
width: 955px;
left: -3px;
top: 265px;
height: 311px;
z-index: 1;
}



#btnhome {
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 110px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(../images/button_home.jpg);
background-repeat: no-repeat;
}

#btnhome a:link, #btnhome a:visited{
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 110px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(../images/button_home.jpg);
background-repeat: no-repeat;
}

#btnhome a:hover, #btnhome a:active{
background-position: left bottom;
}
#btnbrand {
background-color: #9C3;
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 109px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(../images/button_brand.jpg);
background-repeat: no-repeat;
}
#btnbrand a:link, #btnbrand a:visited{
background-color: #9C3;
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 109px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(../images/button_brand.jpg);
background-repeat: no-repeat;
}
#btnbrand a:hover, #btnbrand a:active{
background-position:left bottom;
}
#body #wrapper #header #dropdownnav #buttons #branddropdown ul {
list-style-type: none;
background-color: #020167;
font-size: 16px;
color: #FFF;
display: block;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
text-indent: 8px;
}
#body #wrapper #header #dropdownnav #buttons #branddropdown ul li {
display: block;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
border-bottom-width: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
#btntrailer {
background-color: #963;
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_trailer.jpg);
}
#btntrailer a:link, #btntrailer a:visited{
background-color: #963;
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_trailer.jpg);
}
#btntrailer a:hover, #btntrailer a:active{
background-position:left bottom;
}
#trailertypedropdown {
position: absolute;
visibility: hidden;
left: 282px;
top: 259px;
width: auto;
text-align: left;
z-index: 5;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: auto;
display: block;
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #trailertypetable {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;


}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #trailertypetable tr {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #trailertypetable tr td {
width: auto;
height: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
white-space: normal;
}

#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #trailertypetable tr td #trailertypedropbottom {
background-image: url(../images/dropdown/dropdown_bottom.jpg);
background-repeat: no-repeat;
height: 10px;
}



#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul li {
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-bottom-style: none;
margin: 0px;
height: 50px;
background-repeat: no-repeat;
border-right-style: none;
width: 200px;
border-top-style: none;
border-left-style: none;
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul li:link, #body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul li:visited {
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul li:hover, #body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul li:active {
background-position: bottom left;
}

#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typehorse {
background-image: url(../images/dropdown/dropdown_horse.jpg);
background-repeat: no-repeat;
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typehorselivng {
background-image: url(../images/dropdown/dropdown_horseliving.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typelivestock {
background-image: url(../images/dropdown/dropdown_livestock.jpg);
background-repeat: no-repeat;
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typeopencar {
background-image: url(../images/dropdown/dropdown_opencarhauler.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typeenclosedcar {
background-image: url(../images/dropdown/dropdown_enclosedcar.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typehde {
background-image: url(../images/dropdown/dropdown_hde.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typeequip {
background-image: url(../images/dropdown/dropdown_equip.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typedump {
background-image: url(../images/dropdown/dropdown_dump.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #typelowdump {
background-image: url(../images/dropdown/dropdown_lowdump.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #enclcargo {
background-image: url(../images/dropdown/dropdown_enclosedcargo.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #enclemotor {
background-image: url(../images/dropdown/dropdown_enclosedmotor.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #vending {
background-image: url(../images/dropdown/dropdown_vending.jpg);
}
#body #wrapper #header #dropdownnav #buttons #trailertypedropdown ul #openuty {
background-image: url(../images/dropdown/dropdown_openuty.jpg);
}






#btnhomeliving {
background-color: #C03;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_trailerhomes.jpg);
}
#btnhomeliving a:link, #btnhomeliving a:visited{
background-color: #C03;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_trailerhomes.jpg);
}
#btnhomeliving a:hover, #btnhomeliving a:active{
background-position:left bottom;
}
#btnused {
background-color: #90C;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_useditems.jpg);
}
#btnused a:link, #btnused a:visited{
background-color: #90C;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_useditems.jpg);
}
#btnused a:hover, #btnused a:active{
background-position:left bottom;
}
#btncontact {
background-color: #FF0;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_contactus.jpg);
}
#btncontact a:link, #btncontact a:visited{
background-color: #FF0;
float: left;
height: 29px;
width: 109px;
background-repeat: no-repeat;
background-image: url(../images/button_contactus.jpg);
}
#btncontact a:hover, #btncontact a:active{
background-position:left bottom;
}

#location {
margin: 0px;
float: left;
height: 30px;
width: 950px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 35px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}
#subnav {
margin: 0px;
float: left;
height: 20px;
width: 900px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-top: 7px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 41px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}







#sidemenu {
padding: 0px;
height: 510px;
float: left;
width: 101px;
text-align: left;
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 37px;
background-image: url(../images/sidemenu/sidemenu_background.jpg);
background-repeat: repeat-y;
}
#body #wrapper #sidemenu ul {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
list-style-type: none;
display: block;
margin: 0px;
padding: 0px;
}
#body #wrapper #sidemenu ul li {
margin: 0px;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
width: auto;
color: #FFF;
border-bottom-style: solid;
border-bottom-color: #000;
border-bottom-width: 2px;
padding: 0px;
}
#body #wrapper #sidemenu ul li a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(../images/sidemenu/sidemenu_background.jpg);
background-repeat: repeat-y;
}

#body #wrapper #sidemenu ul li a:link, #body #wrapper #sidemenu ul li a:visited {
color: #FFF;
}
#body #wrapper #sidemenu ul li a:hover , #body #wrapper #sidemenu ul li a:active{
color: #F00;
background-image: url(../images/sidemenu/sidemenu_background_hover.jpg);
background-repeat: repeat-y;
}

#branddropdown {
display: block;
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
visibility: hidden;
left: 19.44em;
top: 15.75em;
width: 139px;
z-index: 4;
}



#main {
padding: 0px;
height: 500px;
width: 855px;
float: left;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
#footer {
padding: 0px;
height: 106px;
clear: both;
background-image: url(../images/BottomBannerGGT2.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-position: -15px -10px;
}
#footernav {
margin: 0px;
float: left;
height: 15px;
width: 500px;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 400px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFF;
}
#footernav a:link, #footernav a:visited{
color: #FFF;
}
#footernav a:hover, #footernav a:active{
color:#F00
}

#footerlogo {
margin: 0px;
padding: 0px;
float: left;
height: 70px;
width: 200px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#body #wrapper #footer #footerlogo a img {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}




Thanks for any help!!

masears88
12-09-2008, 07:19 PM
Ok so i figured out my own mistakes! I figured i would try to take out the UL and the LI out of the table cells and try it with out those and do just straight table cells and change the back ground like i did with the LI but with TR and it worked it removed the space between the cells and looks great! Hope this might help someone out someday! Good Luck!