Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 
Go Back   Dev Articles Community Forums > Web Design > Web Development
Reload this Page

IE's being a bitch.

Discuss IE's being a bitch. in the Web Development forum on Dev Articles.
IE's being a bitch. Web Development forum for discussing issues related to design and general web site layout. Find help for designing your web site to attract returning users.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old December 18th, 2005, 03:08 AM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4
IE's being a bitch.
Hi,

IE has decided to arbitrarily refuse to render my table properly.
Code:
<table class="leftbartable" cellspacing="0">
<tr>
   <td class="cnw" />
   <td class="en" style="width: 112px" colspan="2" />
</tr><tr>
   <td class="ew" rowspan="4"/>
   <td class="leftbarheader">

   </td>
   <td class="leftbarblank" />
</tr><tr>
   <td class="leftbarcontent" rowspan="3">
<!-- My content goes here -->
   </td>
   <td class="cinw1" />
</tr><tr>
   <td class="cinw3" />
</tr><tr>
   <td class="ee" />
</tr><tr>
   <td class="csw" />
   <td class="es" />
   <td class="cse" />
</tr>

</table>


And the CSS:
Code:
.leftbartable td {
   padding: 0px;
   margin: 0px;
}
.leftbarcontent {
   background-color: #C0FF20;
   width: 100px;
   text-align: center;
   }
.leftbarheader {
   background-color: #C0FF20;
   }
.leftbarblank {
   background-color: #C0FF20;
   width: 12px;
   height: 36px;
   }
.cne {
   background: url(/attic/images/frame/corners/NE.png);
   width: 12px;
   height: 12px;
   }
.cnw {
   background: url(/attic/images/frame/corners/NW.png);
   width: 12px;
   height: 12px;
   }
.cse {
   background: url(/attic/images/frame/corners/SE.png);
   width: 12px;
   height: 12px;
   }
.csw {
   background: url(/attic/images/frame/corners/SW.png);
   width: 12px;
   height: 12px;
   }
.en {
   background: url(/attic/images/frame/edges/N.png);
   height: 12px;
   }
.ee {
   background: url(/attic/images/frame/edges/E.png);
   width: 12px;
   }
.es {
   background: url(/attic/images/frame/edges/S.png);
   height: 12px;
   }
.ew {
   background: url(/attic/images/frame/edges/W.png);
   width: 12px;
   }
.cine1 {
   background: url(/attic/images/frame/cornersinv/NE/1.png);
   width: 12px;
   height: 12px;
   }
.cine2 {
   background: url(/attic/images/frame/cornersinv/NE/2.png);
   width: 12px;
   height: 12px;
   }
.cine3 {
   background: url(/attic/images/frame/cornersinv/NE/3.png);
   width: 12px;
   height: 12px;
   }
.cinw1 {
   background: url(/attic/images/frame/cornersinv/NW/1.png);
   width: 12px;
   height: 12px;
   }
.cinw2 {
   background: url(/attic/images/frame/cornersinv/NW/2.png);
   width: 12px;
   height: 12px;
   }
.cinw3 {
   background: url(/attic/images/frame/cornersinv/NW/3.png);
   width: 12px;
   height: 12px;
   }
.cise1 {
   background: url(/attic/images/frame/cornersinv/SE/1.png);
   width: 12px;
   height: 12px;
   }
.cise2 {
   background: url(/attic/images/frame/cornersinv/SE/2.png);
   width: 12px;
   height: 12px;
   }
.cise3 {
   background: url(/attic/images/frame/cornersinv/SE/3.png);
   width: 12px;
   height: 12px;
   }
.cisw1 {
   background: url(/attic/images/frame/cornersinv/SW/1.png);
   width: 12px;
   height: 12px;
   }
.cisw2 {
   background: url(/attic/images/frame/cornersinv/SW/2.png);
   width: 12px;
   height: 12px;
   }
.cisw3 {
   background: url(/attic/images/frame/cornersinv/SW/3.png);
   width: 12px;
   height: 12px;
   }

What it's doing, is stretching my Inverted Corner cells (class=cinw*) to half the remaining space, and leaving the (unspecified height) East Edge cell at one or zero pixels, it's slightly hard to tell

Screenies are attached - the first one is with Gecko, and the second with IE (via IETab extension).

Oh, that reminds me, I must get around to making the menus 8-bit PNG. Stupid IE.
Attached Images
File Type: jpg AtticGecko.jpg (15.8 KB, 403 views)
File Type: jpg AtticIE.jpg (15.7 KB, 344 views)
Reply With Quote
  #2  
Old December 18th, 2005, 01:09 PM
Mittineague's Avatar
Mittineague Mittineague is offline
Contributing User
Dev Articles Novice (500 - 999 posts)
  
Join Date: Jul 2005
Location: West Springfield, Massachusetts
Posts: 549 Mittineague User rank is Private First Class (20 - 50 Reputation Level)Mittineague User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 1 Week 1 Day 7 h 3 m
Reputation Power: 4
non-tabular table use
Granted IE doesn't support CSS the way I'd like it to, but many layout rendering problems can be avoided by not using tables to structure page layout. If you are using a WYSIWYG editor you may have little choice in this, but if you are "hand-coding" your pages you can save yourself a lot of "looks different" problems by reserving the use of tables for displaying tabular data. Rather than trying to "hack" your code so that it seems to "work" in different browsers, IMHO you will benefit from learning how to write better mark-up.
Reply With Quote
  #3  
Old December 19th, 2005, 02:09 AM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4
I'm only using the table to get my image borders looking right. Is there a better way to do this, i.e.
Code:
border-topleft {
   background-image: /images/topleft.png
}

The table itself is in a DIV - and yes, I'm hand-coding.
Reply With Quote
  #4  
Old December 20th, 2005, 12:23 PM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
  
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,890 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 8
You could do the rounded borders cleanly using CSS
You could then mock up the menu using a <UL> and CSS (background images and text displacement)...
Comments on this post
Akdor 1154 agrees!
__________________
Daryl's Homepage | My Blogroll | My Profile | Firefox supporter!
DevArticles Forum Moderator

"The net is a waste of time, and that's exactly what's right about it." -- William Gibson
Reply With Quote
  #5  
Old December 21st, 2005, 04:37 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4
Oooh, that's an awesome border technique - Akdor likes!
Thanks, man.

EDIT: I'd give you rep, but it looks like there's a post-count limit. Because, you know, post-count is all about intellectual abillity and alll...
Reply With Quote
  #6  
Old December 22nd, 2005, 09:49 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
  
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,890 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 8
Heh, no problem man. Be sure to check back often.
The technique above is one I've used before, so I can try my best to help.

If you need a link to the UL background image replacement trick, I could find one...
Reply With Quote
Reply

Viewing: Dev Articles Community Forums > Web Design > Web Development > IE's being a bitch.

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway. 
Stay green...Green IT