tables in unordered list spacing problem in IE7
I have some tables in a <ul>, but the spacing between line items is not working properly in IE7, but its fine in FF. Below is the code. As you can see, I've tried many variaions to get it to work.
Besides adding 'margin: 0px 0px -5px 0px' to the li element, what else can I do to fix it?
<style>
ul {
padding:0;
margin: 0;
}
li {
padding:0;
margin: 0px 0px 0px 0px;
}
.mytable {
border:1px solid black;
padding:0;
margin: 0px 0px 0px 0px;
border-collapse:collapse;
border-spacing: 0;
clear:both;
}
.mytable td {
padding:0;
margin: 0;
}
</style>
<ul>
<li><table class="mytable" cellspacing="0"><tr><td>ce
<li><table class="mytable" cellspacing="0"><tr><td>ce
<li><table class="mytable" cellspacing="0"><tr><td>ce
</ul>
Besides adding 'margin: 0px 0px -5px 0px' to the li element, what else can I do to fix it?
<style>
ul {
padding:0;
margin: 0;
}
li {
padding:0;
margin: 0px 0px 0px 0px;
}
.mytable {
border:1px solid black;
padding:0;
margin: 0px 0px 0px 0px;
border-collapse:collapse;
border-spacing: 0;
clear:both;
}
.mytable td {
padding:0;
margin: 0;
}
</style>
<ul>
<li><table class="mytable" cellspacing="0"><tr><td>ce
<li><table class="mytable" cellspacing="0"><tr><td>ce
<li><table class="mytable" cellspacing="0"><tr><td>ce
</ul>
ASKER
that didn't work.
why are you putting tables in lists?
ASKER
because that was the only way I could come up with to get the layout I was looking for. I'd be happy to entertain your suggestions.
what kind of layout do you want?
ASKER
well, a table-style layout, actually! The reason the tables are in the list is because I'm using scriptaculous for its drag and drop library, which works on uls. The page I'll be using all of this on is a task list, and there are various coulmns, task desc, assigned to, target date, etc.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
i was able to fix it by putting a -5px margin on the li, also a band-aid
lol nice1
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
yeh conditional comments are cool... I assumed he already knew about them... nice1
ASKER
yes, I was aware of conditional comments, but had never used them. I was hoping to avoid them, but with the CSS browser mess out there, that may be the only option. The rumor is the IE8 will be more standards compliant. Here's hoping!
This is always the struggle: Balancing between standards compliance and practicality. From a standards compliance perspective, hacks are bad, and purists will tell you to rethink your design. Unfortunately, we work in a world where oftentimes, it is our job to integrate presentation and functionality developed by other team members. Especially with respect to design, it's tough to get presentations changed. The best we can hope for (and is something that I have done and have had some success with) is to educate designers so they're aware of the things that aren't considered to be standards-compliant design. I also point them to Jeffrey Zeldman's book on standards compliant design - it's a matter-of-fact approach to designing things according to standards.
On the other side of the coin, we have practicality. We all have deadlines to meet, and other pressures to get our projects done, so we ultimately have to compromise. I find that conditional comments are the safest bet because even though using them is technically a hack, at least you're writing proper CSS code, and not introducing symbols directly in your CSS.
GoofyDawg
On the other side of the coin, we have practicality. We all have deadlines to meet, and other pressures to get our projects done, so we ultimately have to compromise. I find that conditional comments are the safest bet because even though using them is technically a hack, at least you're writing proper CSS code, and not introducing symbols directly in your CSS.
GoofyDawg
<ul><li><table class="mytable" cellspacing="0"><tr><td>ce