ie sucks

[elli]

Since using tables in HTML has been forbidden/shunned, I took up the suggestion to replace a table on my site with divs or spans. And while I'd prefer tables for the fact that they seem to work the same on all browsers, apparently they're obsolete. Still not sure why.

Anyway, since my markup knowledge is a bit blurry, I'm having a few problems with styling divs correctly, mostly on Internet Explorer/compatibility mode.

twicebakedfx.com/test2.html <--with divs
twicebakedfx.com/test.html <--with tables

-The one thing I can't stand is that the two bottom boxes aren't the same height, while they are with tables. If one has more content, it'll stretch of course, but the other won't, so everything's suddenly uneven. This is true no matter what browser. Is there a way to keep the two boxes the same height?

-Another thing is in IE compatibility mode, the divs are adding line breaks all over. I know span doesn't do this, but not sure how to use it right, and margin/padding:0 on those divs doesn't keep the breaks away.

-The two bottom boxes aren't floating as they should be. The right side box is okay, but the left is like 100px in.

Seriously, what's so horrible about tables? They're nice and organized and predictable. xD

Any help with these issues would be appreciated. :3

[Charles Stover]

Tables take longer for the browser to render, for one. However, the most important aspect of their obsolete-ness is the fact that so many people use them for things other than tabular data. When you put something in a table, it should be tabular (think an Excel spreadsheet).

Proper table:
_____ | Name | Money
User1 | Charles | Infinity
User2 | Daniel | $5
User3 | Tasha | $10

Improper table:
Left Text | Center Text | Right Text

Tables aren't for aligning data. They're for comparing and organizing related data.

Why does it matter? For extensibility. When it shows up on your screen, it's all the same. When it's read by a search engine, browser extension, or program, it's read incorrectly.
Say, in the future, you have a PHP spider (not uncommon; I have more than I can count). If I wanted to retrieve some financial or statistical data from my website for another website, I could download that page using my spider. I'd then have the source code as a large string of its HTML. To get the data, I could just use basic RegEx to find the table:
/<table>.*<\/table>/
Done. I have the data I wanted. I can parse it however to display it however in whatever program I needed it for. This will work for a website, a program, whatever. I can use the same method to get the data.
If I used tables to align my website, my spider would be riddled with all sorts of non-tabular tables that I'd have to sort through and work around to find the table I'm actually looking for. And it would be a huge pain in the arse to write algorithms to determine which tables are for alignment and which contain the data I want - harder than it sounds.

When used properly, browser modifications will be easier to use and create. An out-there example would be going through a page riddled with statistics. Say you're done looking at the data and want to find a link you saw somewhere in the mile-long page. You could use a simple "collapse tables" feature to temporarily remove the data so that you could see the rest of the website. If the site was aligned with tables, instead of divisions, the entire website would collapse and disappear, leaving you with nothing. If the link was in the tables, you could do a "find links in tables." Using tables for alignment, that would erroneously list nearly every link on the entire website.

So, that's why. You use tables for things that are tables. That way, search engines, programs, etc. will be able to know what it is.

[elli]

That... Well, that makes a ton of sense. I never thought of tables as spreadsheets for some reason, although it's sort of what they were made for, right? So then the reason they're obsolete is because web crawlers can't tell the difference between relevant data and layouts? Suppose that's reasonable. I don't feel quite as bitter now, though still aggravated with ie. =p

Thanks for the explanation, Charles. :3

[Charles Stover]

Yes, they were made for spreadsheets. And it's not just web crawlers. When HTML was made, web crawlers wasn't really a big deal, nor were programs that read web data. Now that the Internet has advanced, a search engine is the most valuable company in the world, programs are capable of connecting to the Internet, and formats like XML and RSS exist, it's become very important for said programs to be able to read the Internet as easily as they read feeds.

And yes, IE sucks. You'll get used to it, though, with practice. When you stop using browser-specific codes, you start to forget they exist. My codes are cross-browser off the bat, just from practice.

I'm going to go ahead and assume your problem is what most IE problems are when using XHTML: padding.

In most browsers, if you set the width to 50% and the padding to 6pt, the width of the element will be 50%. In IE, if you set the width to 50% and the padding to 6pt, the width will be 50% + 6pt.
That causes a lot of wrapping problems. If that 50% element is between two 25% elements, the extra 6pt will cause it to be pushed below the other two (since it won't fit between them).

This is fixed like so:
<div style="width : 50%;">
<div style="border : #000000 solid 3pt;">
<div style="padding : 6pt;">
text
</div>
</div>
</div>

That way, the padding (and border) are contained within the 50% (as it should be) and can't get out, causing it to wrap.

And that's, in a nutshell, why IE is horrendous. It takes three times as many elements to do a simple task. Thanks, IE!

[elli]

The only problem is that I'm not sure which codes are cross browser. xD Is there a way to know for sure? Also, on my site there, was I doing the divs right so that ie won't add padding to width? Thanks. :3

[Charles Stover]

I didn't look at your source code, and I haven't opened IE since I got this computer, so I have no clue. The best way to determine if your code is cross-browser is to check it in multiple browsers.
The best is to try your code in each browser with each sectional addition to the page, instead of waiting until the page is completed.

[elli]

All right, I'll try it a bit at a time. I know that it's fine up until those three main boxes on the page...

[elli]

So I redid the divs and removed the extra breaks IE was adding. The larger box is fine, and so are the smaller ones until I add float:left and float:right to each respective div. That causes the footer and #main to lose their absolute positions, and the two smaller boxes escape. xD Like this.

Is there a way to stick the two divs side-by-side without using float?

[Charles Stover]

No.

Which two are being floated in your screenshot?

I think what you're needing now is "clear : both;" (guessing, since that's a common need when floating two objects).

If you have:
<div style="float : left; width : 45%;">left side</div>
<div style="float : right; width : 45%;">right side</div>
<div>Footer!</div>

Then the footer will have problems. Especially if left and right are different heights. Now it's been a while since I've dealt with this problem, so I can't remember the exact effect it has. Either it tries to fit the footer in between the two floating divs, places the footer behind the floating divs, or positions the footer under the smallest (height) floating div.

Regardless of which of these happen, you can fix it like so:
<div style="float : left; width : 45%;">left side</div>
<div style="float : right; width : 45%;">right side</div>
<div style="clear : both;">Footer!</div>

There's also clear : left and clear : right. I can't say I can explain the exact details of this, as I don't know what the browser thinks when it parses the clear attribute; but I do know it works and I know it was created for this exact situation, therefore use it.

clear : both will cause the element to be placed underneath all [block?] elements above it (instead of placed to the left, right, etc.).
An easy to comprehend example:

<div style="float : left; width : 25%;">I'm on the left!</div>
<div>I'm on the right! I automatically wrap next to leftie.</div>

versus:

<div style="float : left; width : 25%;">I'm on the left!</div>
<div style="clear : both;">I'm underneath leftie!</div>

You would actually only need "clear : left" since there's only a left-floating element, but I can't fathom a situation where you'd want to wrap underneath a left floating one but not wrap under a right floating one. So it's easier to just "clear : both" in all situations. Especially if you may switch "float : left" to "float : right" at some point in the future. Having it as "clear : both" will prevent the need to change all your clears if you change your floats.

[elli]

In the screenshot, the black box is set to float:left and the white to float:right. Adding clear:both to the footer's properties didn't fix it. ):

Here's the relevant CSS without floats or clear:

html,body {
height: 100%;
background-color: #b4b4b4;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #898989;
margin: 0;
padding: 0;
}
#span {
height: auto !important;
height: 100%;
min-height: 100%;
width: 1024px;
background-image: url(images/bg.png);
background-position: top right;
background-repeat: repeat;
background-attachment: scroll;
position: relative;
border-left: 3px solid #979797;
border-right: 3px solid #979797;
margin: 0 auto;
}
#main {
height: 100%;
width: 751px;
padding-bottom: 90px;
margin: 0 auto;
text-align: center;
}
#footer {
width: 1005px;
background-image: url(images/windowbg.png);
background-position: top left;
background-repeat: repeat;
background-attachment: scroll;
position: absolute;
padding: 9px;
bottom: 0;
text-align: center;
}


And relevant HTML:

<div id="span">
<div id="top">
    <img src="images/banner.png" width="699" height="130" alt="twicebaked" /><ul id="nav"><li><img src="images/end.png" width="118" height="37" alt="" /></li><li><a id="home" href="index.html"><img src="images/1px.gif" border="0" alt="home" /></a></li><li><a id="about" href="about.html"><img src="images/1px.gif" border="0" alt="about" /></a></li><li><a id="gallery" href="gallery.html"><img src="images/1px.gif" border="0" alt="gallery" /></a></li><li><a id="resources" href="resources.html"><img src="images/1px.gif" border="0" alt="resources" /></a></li><li><a id="links" href="links.html"><img src="images/1px.gif" border="0" alt="links" /></a></li></ul>
  </div>
<img src="images/shadow.png" width="100%" height="16" alt="" style="margin-bottom:30px;" />
<div id="main">
    <img src="images/maintop.png" width="751" height="20" alt="" /><div style="background-image:url(images/mainmiddle.png);width:751px;padding-top:30px;padding-bottom:36px;"><img src="images/news1.png" width="426" height="224" alt="i dunno lol" /><img src="images/news2.png" width="277" height="224" alt="[]" /></div><img src="images/mainbottom.png" width="751" height="19" />
       <div style="width:234px;background-color:#000000;">
        <div style="background-image:url(images/tweettop.png);background-repeat:no-repeat;text-align:right;padding:10px 0 7px 0;"><font style="color:#aeb36a;font-size:15px;letter-spacing:15px;">+++</font><font style="color:#666666;font-size:12px;letter-spacing:17px;text-transform:uppercase;">tweets</font></div>
           <div style="background-image:url(images/windowbg.png);text-align:justify;padding:15px 15px 0 15px;">
            hai
           </div><img src="images/tweetbottom.png" width="234" height="21" alt="" />
       </div>
       <div style="width:488px;background-color:#ffffff;">
        <div style="background-image:url(images/newstop.png);background-repeat:no-repeat;text-align:right;padding:10px 0 7px 0;"><font style="color:#aeb36a;font-size:15px;letter-spacing:15px;">+++</font><font style="color:#666666;font-size:12px;letter-spacing:17px;text-transform:uppercase;">news+updates</font></div>
      <div style="background-image:url(images/windowbg.png);text-align:justify;padding:15px 15px 0 15px;">
        <p>commission page -- If I sent the email right, those of you that have commissions with me should know that a page with your template's... <a href="/news.html">( more )</a></p>
            <p>sorry, guys -- I apologize to those of you waiting on me for your templates or concepts. My muse fell into a dark hole the other day and... <a href="/news.html">( more )</a></p>
            <p>gallery and resources -- I've added a few pieces to the gallery within the last week: Breathless (template), Simply the Sims 2 (really... <a href="/news.html">( more )</a></p>
            <p>new layout -- Twicebaked has barely been online for what, a week? And now it seems I've felt the need to create a new layout. To be... <a href="/news.html">( more )</a></p>
            <a href="/news.html">( more )</a>
        </div><img src="images/newsbottom.png" width="488" height="21" alt="" />
    </div>
   </div>
   <div id="footer">
    <p class="copyright">©elli petersen 2010</p>
       <p class="copyright2"><a href="http://ebbymac.deviantart.com">deviantart</a> | <a href="/credits.html">credits</a></p>
   </div>
</div>


[Charles Stover]

There isn't a single float in that code...

[elli]

No, I took them out for now. xD "Here's the relevant CSS without floats or clear"

[Charles Stover]

Ah. Well, I very well can't tell you where the error is without seeing the whole code.

[elli]

The rest of it is only paragraph and link styling, but okay. :3


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>twicebaked</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<script type="text/javascript" src="js/blogger.js"></script>
</head>

<body id="index">
<div id="span">
<div id="top">
    <img src="images/banner.png" width="699" height="130" alt="twicebaked" /><ul id="nav"><li><img src="images/end.png" width="118" height="37" alt="" /></li><li><a id="home" href="index.html"><img src="images/1px.gif" border="0" alt="home" /></a></li><li><a id="about" href="about.html"><img src="images/1px.gif" border="0" alt="about" /></a></li><li><a id="gallery" href="gallery.html"><img src="images/1px.gif" border="0" alt="gallery" /></a></li><li><a id="resources" href="resources.html"><img src="images/1px.gif" border="0" alt="resources" /></a></li><li><a id="links" href="links.html"><img src="images/1px.gif" border="0" alt="links" /></a></li></ul>
  </div>
<img src="images/shadow.png" width="100%" height="16" alt="" style="margin-bottom:30px;" />
<div id="main">
    <img src="images/maintop.png" width="751" height="20" alt="" /><div style="background-image:url(images/mainmiddle.png);width:751px;padding-top:30px;padding-bottom:36px;"><img src="images/news1.png" width="426" height="224" alt="i dunno lol" /><img src="images/news2.png" width="277" height="224" alt="[]" /></div><img src="images/mainbottom.png" width="751" height="19" />
       <div style="margin-top:-36px;width:751px;">
       <div style="width:234px;background-color:#000000;float:left;">
        <div style="background-image:url(images/tweettop.png);background-repeat:no-repeat;text-align:right;padding:10px 0 7px 0;"><font style="color:#aeb36a;font-size:15px;letter-spacing:15px;">+++</font><font style="color:#666666;font-size:12px;letter-spacing:17px;text-transform:uppercase;">tweets</font></div>
           <div style="background-image:url(images/windowbg.png);text-align:justify;padding:15px 15px 0 15px;">
            hai
           </div><img src="images/tweetbottom.png" width="234" height="21" alt="" />
       </div>
       <div style="width:488px;background-color:#ffffff;float:right;">
        <div style="background-image:url(images/newstop.png);background-repeat:no-repeat;text-align:right;padding:10px 0 7px 0;"><font style="color:#aeb36a;font-size:15px;letter-spacing:15px;">+++</font><font style="color:#666666;font-size:12px;letter-spacing:17px;text-transform:uppercase;">news+updates</font></div>
      <div style="background-image:url(images/windowbg.png);text-align:justify;padding:15px 15px 0 15px;">
        <p>commission page -- If I sent the email right, those of you that have commissions with me should know that a page with your template's... <a href="/news.html">( more )</a></p>
            <p>sorry, guys -- I apologize to those of you waiting on me for your templates or concepts. My muse fell into a dark hole the other day and... <a href="/news.html">( more )</a></p>
            <p>gallery and resources -- I've added a few pieces to the gallery within the last week: Breathless (template), Simply the Sims 2 (really... <a href="/news.html">( more )</a></p>
            <p>new layout -- Twicebaked has barely been online for what, a week? And now it seems I've felt the need to create a new layout. To be... <a href="/news.html">( more )</a></p>
            <a href="/news.html">( more )</a>
        </div><img src="images/newsbottom.png" width="488" height="21" alt="" />
    </div>
       </div>
   </div>
   <div id="footer">
    <p class="copyright">©elli petersen 2010</p>
       <p class="copyright2"><a href="http://ebbymac.deviantart.com">deviantart</a> | <a href="/credits.html">credits</a></p>
   </div>
</div>
<!--BEGIN PRELOADED IMAGES-->
<img src="images/homer.png" alt="index" class="hiddenPic" />
<img src="images/aboutr.png" alt="about" class="hiddenPic" />
<img src="images/resourcesr.png" alt="resources" class="hiddenPic" />
<img src="images/galleryr.png" alt="gallery" class="hiddenPic" />
<img src="images/linksr.png" alt="links" class="hiddenPic" />
<!--END PRELOADED IMAGES-->
</body>
</html>



html,body {
height: 100%;
background-color: #b4b4b4;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #898989;
margin: 0;
padding: 0;
}
#span {
height: auto !important;
height: 100%;
min-height: 100%;
width: 1024px;
position: relative;
background-image: url(images/bg.png);
background-position: top right;
background-repeat: repeat;
background-attachment: scroll;
border-left: 3px solid #979797;
border-right: 3px solid #979797;
margin: 0 auto;
}
#top {
height: 167px;
width: 100%;
background-image: url(images/windowbg.png);
background-position: top left;
background-repeat: repeat;
background-attachment: scroll;
text-align: right;
margin: 0;
}
#nav {
height: 37px;
white-space: nowrap;
list-style-type: none;
margin: 0;
}
#nav li { display: inline; }
#nav li a { text-decoration: none; }
#main {
height: 100%;
width: 751px;
padding-bottom: 90px;
margin: 0 auto;
text-align: center;
}
#footer {
width: 1005px;
background-image: url(images/windowbg.png);
background-position: top left;
background-repeat: repeat;
background-attachment: scroll;
clear: both;
position: absolute;
padding: 9px;
bottom: 0;
text-align: center;
}
p { padding: 0 0 15px 0; margin: 0; }
p.copyright { text-transform: uppercase; margin: 1px; letter-spacing: 6px; font-size: 10px; padding: 0 0 3px 0; }
p.copyright2 { text-transform: uppercase; margin: 1px; letter-spacing: 5px; font-size: 8px; padding: 0; }
a:link { color: #aeb36a; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: #aeb36a; text-decoration: none; }
a:active { text-decoration: underline; }
a#links img { background: url(images/links.png) top left no-repeat; width: 99px; height: 37px; }
a#links:hover img {background: url(images/linksr.png) top left no-repeat; width: 99px; height: 37px; }
#links #nav a#links img {background: url(images/linksr.png) top left no-repeat; width: 99px; height: 37px; }
a#gallery img { background: url(images/gallery.png) top left no-repeat; width: 128px; height: 37px; }
a#gallery:hover img {background: url(images/galleryr.png) top left no-repeat; width: 128px; height: 37px; }
#gallery #nav a#gallery img {background: url(images/galleryr.png) top left no-repeat; width: 128px; height: 37px; }
a#resources img { background: url(images/resources.png) top left no-repeat; width: 154px; height: 37px; }
a#resources:hover img {background: url(images/resourcesr.png) top left no-repeat; width: 154px; height: 37px; }
#resources #nav a#resources img {background: url(images/resourcesr.png) top left no-repeat; width: 154px; height: 37px; }
a#about img { background: url(images/about.png) top left no-repeat; width: 105px; height: 37px; }
a#about:hover img {background: url(images/aboutr.png) top left no-repeat; width: 105px; height: 37px; }
#about #nav a#about img {background: url(images/aboutr.png) top left no-repeat; width: 105px; height: 37px; }
a#home img { background: url(images/home.png) top left no-repeat; width: 95px; height: 37px; }
a#home:hover img {background: url(images/homer.png) top left no-repeat; width: 95px; height: 37px; }
#index #nav a#home img {background: url(images/homer.png) top left no-repeat; width: 95px; height: 37px; }
.hiddenPic { display: none; }


[Charles Stover]

It's parsing right in IE for me?