|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
February 4th, 2004, 03:23 AM
|
|||
|
|||
|
Tables & CSS... Part 2 (Kinda)
I seem to be having quite the time with Tables and CSS, specifically in regards to column alignment.
My previous post was about whether it is possible to have different column widths for the same column in different rows. I have since given up on that endeavour, deciding instead to use CSS aligned DIV tags instead. :^/ However, now I'm having a serious problem with setting the widths of two columns in a table using CSS. The table is quite simple. It's a single table with 5 rows that span two columns, and one row that contains the two columns. The problem is that I want the width of the first column to be 150px with no padding in the cell at all. The column next to is should take up the remainder of the space of the row and have 20px padding on the left and right sides of the cell. While I'd assume this would be an easy task, it appears that it's not to be. Instead, the first column ends up being a VERY large size if there is nothing (ie: text) in the column, and comes out VERY strange when there is something in it. The code is below: PHP Code:
Each cell is colored to help identify each one. Is there something blatently obvious that I'm missing or is this a REALLY bad bug that just *happens* to affect Mozilla (Firebird 0.61) AND Internet Explorer 6.0? Any help is MUCH appreciated. :^) - coredumped. Last edited by coredumped : February 5th, 2004 at 04:29 AM.
|
|
#2
February 4th, 2004, 12:20 PM
|
||||
|
||||
|
Remove the width rule from the 2 column <td>s.
Code:
<html>
<head>
</head>
<body style="margin: 0px;
background-color:#FFFFFF;
text-align:center;
height: 100%;">
<table style="border-collapse: collapse;
margin-left:auto;
margin-right:auto;
width: 750px;
height:100%;
border-left:#000000 1px solid;
border-right:#000000 1px solid;">
<tr>
<td colspan="2"
style="height: 200px;
border-bottom: #000000 1px solid;
padding: 0px;">
</td>
</tr>
<tr>
<td colspan="2"
style="height:26px;
background-color:#FF0000;
border-bottom:#000000 1px solid;
text-align:right;
padding: 0px;
padding-right: 7px;">
</td>
</tr>
<tr>
<td colspan="2"
style="background-color:#FFFF00;
height: 15px;
padding-left: 0px;">
</td>
</tr>
<tr>
<td colspan="2"
style="border-top:#0000FF 1px solid;
border-bottom:#0000FF 1px solid;
background-color:#00FF00;
height:40px;
padding-left:15px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;">
</td>
</tr>
<tr>
<td
style="width:150px;
background-color:#0000FF;
vertical-align:top;
text-align:center;
border-right:#000000 1px solid;
border-bottom:#000000 1px solid;
padding: 0px;">
Something01</td>
<td
style="background-color:#00FFFF;
vertical-align:top;
border-bottom:#000000 1px solid;
padding: 0px 20px 0px;">
Something02</td>
</tr>
<tr style="background-color:#FFFFFF; height:24px;">
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#3
February 4th, 2004, 04:19 PM
|
|||
|
|||
|
Part 3???
Thanks for the help kk5st, but it seems as though there's a new problem and it's ONLY to do with Internet Explorer.
In one of the rows (second to be exact), I want to use it as a menubar. So, I put in a series of <a> tags with <img>'s, all right-justified (as set in the style for that row). In Mozilla, it works fine, the column that should be 150px, stays 150px wide (actually, I measured it out to be 151, but I won't sweat over 1 pixel. In IE6, however, the column widens to a grotesque 416PX!!!! Here's the updated code: PHP Code:
Any thoughts as to why this is happening and what to do to remedy it? Thanks! - coredumped. Last edited by coredumped : February 5th, 2004 at 04:35 AM.
|
|
#4
February 4th, 2004, 04:50 PM
|
||||
|
||||
|
I'll take a look at it. Since I don't have your images, what are their sizes? Your code should include size on all foreground images—it helps the browser compute the layout.
BTW, your code stretches out to about 2500 pixels wide. That is a real PITA to read. Compare to the code I posted. I've already pasted into an editor and started reformatting, but you might consider your format before posting more code—it doesn't have to be all on one line. cheers, gary
|
|
#5
February 4th, 2004, 05:06 PM
|
|||
|
|||
|
Image Sizes
Each image in the menubar is 70x25 pixels. 6 Images for a total width of 420px. Not exactly the same number, but close. Coincidence?
Thanks for the note about posting code, I'll be careful in the future. :^) UPDATE: I tried removing the images from the menubar and replace them with text for the links, and the column width STILL remains at 416 pixels wide. HOWEVER, removing the <a> link tags and leaving plain text seems to keep the column at 150px. - coredumped. Last edited by coredumped : February 4th, 2004 at 05:17 PM.
|
|
#6
February 4th, 2004, 10:58 PM
|
||||
|
||||
|
This example should be what you want. I made some changes for structure's sake. Some style rules were added to support the changes. The code is validated.
cheers, gary
|
|
#7
February 5th, 2004, 04:23 AM
|
|||
|
|||
|
Frustrated!
Gary, thanks for all your help thus far, but unfortunately it seems as though trying to cater to the 'imperfections' of Internet Explorer is only causing more problems than what it's worth. All the code I have had up until now has been HTML with CSS. The expectation was that once CSS was properly functioning in HTML, I would implement the page as XHTML for production and make whatever debugging changes necessary at that time. Perhaps that was a wrong course of action, but I was happy to see that you had implemented it in the example link your provided. Unfortunately, this raised several more issues, primarily with Internet Explorer. At first, I became discouraged after seeing that the table was no longer stretching to the length of the browser viewing area. I was able to overcome this problem by setting a style for both the <html> and <body> tags, setting their height to 100%. But this is when other problems began to arise. Under Mozilla, the page seemed to render almost perfectly, but MSIE (as expected), failed miserably. Internet Explorer seems to disregard row height formatting COMPLETELY when rendered as an XHTML page. To be honest, I had a working format with HTML & CSS previously, which placed the two columns in the design we have been fooling around with... as a nested table. It seemed to work. I, however, merely wanted to implement 'proper' web scripting and design by eliminating the use of nested tables, and use XHTML as opposed to HTML. However, as we've discovered, it's hard to try and follow 'proper' and 'accepted' web design and coding standards, when the browsers themselves do not 'proper'ly implement those very standards (most notably MSIE). Sorry for the rant, I'm just VERY frustrated that we have to resort to such measures and frustrations because of someone's inability or ignorance of accepted standards. :^/ Something I noticed about the example link you provided was that the links in the menubar are being displayed in reverse order in both Internet Explorer AND Mozilla. I'm curious as to why this might be happening. Furthermore, I'm a little confused as to why it's implemented in this way. Can you shed some light on this? Anyways, here is the latest code, if anyone wants to tackle it: PHP Code:
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
