15 replies [Last post]
MadCowIV
Offline
Regular
Last seen: 17 years 32 weeks ago
Timezone: GMT-7
Joined: 2004-11-22
Posts: 13
Points: 0

Alright, the page in question is at http://madcow.applyclan.com/projects/Alistair_Maxwell. It works nicely in FF 1.0, but the IE family doesn't like it as much.

I've tinted the two columns red and green so as to see what's going on better. Sorry if it hurts Smile

The problem here is that I want the columns spaced by only 1 pixel, yet IE demands I put 3 pixels in between with the threat of throwing the main column to the bottom if they get closer than 3px.

I have reset all of the padding and margins that could effect it to 0, no result. I took out the top sectoin (the two blue areas), no result. Took out the hidden hr's (hidden using display:none;), no result. I'm at a loss on how to make IE understand how dearly these columns want to be closer.

Styles at http://madcow.applyclan.com/projects/Alistair_Maxwell/scripts/mask.css.
You can get the HTML from the first link. If you don't want to fight your way through my HTML and CSS, I suppose I could post a very cut down version here, but I don't think it'd be as effective.

MadCowIV
Offline
Regular
Last seen: 17 years 32 weeks ago
Timezone: GMT-7
Joined: 2004-11-22
Posts: 13
Points: 0

2 columns hate intimacy

Grrr! The forums hurt my links because I put them at the end of the sentence. Here they are again without the periods at the end:
http://madcow.applyclan.com/projects/Alistair_Maxwell
http://madcow.applyclan.com/projects/Alistair_Maxwell/scripts/mask.css

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 8 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

2 columns hate intimacy

What happens with:

#shirt {
	width: auto;
	background-color:#f00;
	margin-right: 213px;
	padding: 0;
}

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

MadCowIV
Offline
Regular
Last seen: 17 years 32 weeks ago
Timezone: GMT-7
Joined: 2004-11-22
Posts: 13
Points: 0

2 columns hate intimacy

Alas, not much happens. I can't tell if anything different at all has happened. But the main column is still at the bottom. Sad

The right column has some sorta problem. Some property is making it 3 pixels longer.

I'll post more later.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 columns hate intimacy

It's the IE 3 pixel jog. Here's a good resource:
http://www.positioniseverything.net/explorer/threepxtest.html

The problem lies within the #sleeve div being floated right (and 3 pixel padding provided by IE). Just follow the fix on PIE's page

MadCowIV
Offline
Regular
Last seen: 17 years 32 weeks ago
Timezone: GMT-7
Joined: 2004-11-22
Posts: 13
Points: 0

2 columns hate intimacy

Ah! Just what I've been waiting for! Thank you very much.

I was pretty sure there was a well-known glitch in IE that someone had written about, but I wasn't sure what it was called or where to look. Thanks!

MadCowIV
Offline
Regular
Last seen: 17 years 32 weeks ago
Timezone: GMT-7
Joined: 2004-11-22
Posts: 13
Points: 0

2 columns hate intimacy

Blast. :oops:

Either I'm an idiot, this doesn't apply correctly to my situation, or there is a completely different problem.

I have tried many variations on the code presented in that article, but none of them fix it. Perhaps WolfCry911 can come and give me the code I should be using?

I think I don't properly understand what I'm supposed to be doing through that article. It didn't exactly make a lot of sense to me, because I haven't gotten too down and dirty with CSS to know about all of the different things they were talking about.

Thanks a ton!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

2 columns hate intimacy

IE has so many float model and box model bugs that catching them all is a real chore. You can take some steps to cause the misbehavior not to mess things up.

You've already done most of what I'll suggest.

  • Force standards mode so you can ignore box model probs

  • Wrap the page to establish an overall width.
  • Decide which column should appear first in the html.
  • Make that column a float.
  • Make the other column static with no stated width.
  • For example;
    #wrapper {
        width: 760px;
        }
    
    #cola {
        float: left;
        width: 200px;
        }
    
    #colb {
        margin-left: 200px;
        }
    
    -------------
    
    <div id="wrapper">
      <div id="cola">
        stuff in the left col
      </div>
      <div="colb">
        right col stuff
      </div>
    </div>
    Allowing the one column to seek its own width generally eliminates the dropdown effect.

    cheers,

    gary

    [/]

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    MadCowIV
    Offline
    Regular
    Last seen: 17 years 32 weeks ago
    Timezone: GMT-7
    Joined: 2004-11-22
    Posts: 13
    Points: 0

    2 columns hate intimacy

    Interesting. That's actually what I eventually set off to do. But you said to float the main column. Why is that? From what I have experienced, (like you can see at http://simplebits.com, where the main column is floated) doing it that way sometimes shoots the user to the bottom of the page if the tiniest of click-and-drags is done in a wrong place. If you select an area off on the empty side space that is below the non-floated column (since it isn't the main column, its content is not likely to stretch to the bottom of the page), the nearest content that can be selected is at the bottom, so the user gets thrown down there. It can't select from the float because floats have magical powers that make them not get selected from unless a direct selection happens.

    Anyway, I was rambling. There are parts on the page I'm working on where items do need to have the full width. I'm okay if the whole div doesn't have a set width, but these elements do need full width (they are h2s that reside on a colored bar that spans the column). To make them full width I either need to fix the jog or I need to find another, less reliable way. Right now I have them using float:left; so that they can be unaffected by the jog, but I think that's too risky a move. I'm almost positive some browser is going to hate that I did that.

    *sigh* I don't even know if I'm making sense.

    Thanks folks.

    I do have another question, but it's a bit off-topic in this thread. I may end up making a new thread about it. On the site I'm working on, the navigational links need to have hit areas 212px wide and the text of the link needs to sit in the middle of the area. I have no idea how I would go about setting the hit area like I want to. Trying to give the 'a' element widths and heights isn't working, and (the links are in <dd>s) widthing and heighting the 'dd's doesn't do much for me either. Suggestions?

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 1 year 18 weeks ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    2 columns hate intimacy

    Putting the main content in a float is a result of bringing that content to the top of the html for SEO and accessibility purposes. Feel free to do otherwise.

    In re your first paragraph, I have no clue what you mean. Smile

    For the rest, study this little demo. (originally made for another purpose)

     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
     
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
        <meta name="generator" 
        content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" /> 
        <meta name="editor" content="Emacs 21" /> 
        <meta name="author" content="Gary Turner" /> 
        <meta http-equiv="content-type" 
        content="text/html; charset=ISO-8859-1" /> 
     
        <title>2 Column - Apparent Equal Height</title> 
     
    <style type="text/css"> 
    /*<![CDATA[*/ 
     
    body { 
        padding: 0; 
        margin: 0; 
        font: 100% Tahoma, Helvetica, sans-serif; 
        color: black; 
        background-color: white; 
        text-align: center; /*IE centering hack*/ 
        } 
     
    p { 
        font-size: 1em; 
        margin-bottom: 0; 
        } 
     
    h1, h2 { 
        text-align: center; 
        } 
     
    ul { 
        margin: 0; 
        padding: 0; 
        list-style: none; 
        } 
     
    li a { 
        display: block; 
        text-align: center; 
        text-decoration: none; 
        } 
     
    li a:hover { 
        background-color: silver; 
        text-decoration: underline; 
        } 
     
    /*The background image should be the width of 
      the sidebar.  Its purpose is to simulate a 
      column of full height.*/ 
    #wrapper { 
        position: relative; 
        width: 650px; 
        margin: 0 auto; /*proper centering*/ 
        text-align: left; /*return to normalcy*/ 
        border: 1px solid #333; 
        background: white url(sidebar.jpg) top left repeat-y; 
        } 
     
    #banner { 
        background-color: white; 
        border-bottom: 1px solid #555; 
        } 
     
    #sidebar { 
        float: left; 
        width: 150px; 
        padding: 0 5px; 
        border-right: 1px solid #555; 
        } 
     
    #main { 
        margin-left: 160px; /*adjust for overlap with sidebar border*/ 
        border-left: 1px solid #555; 
        padding: 0 5px; 
        } 
     
    #footer { 
        font-size: 0.8em; 
        text-align: center; 
        margin-top: 0; 
        } 
     
    /* see http://www.positioniseverything.net/easyclearing.html 
       for explanation of Tony Aslett's elegant hack */ 
     
    .clearing:after { 
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden; 
        } 
     
    .clearing { 
        display: inline-block; 
        } 
     
    /* hides from IE/Mac \*/ 
    * html .clearing {  
        height: 1%; 
        } 
     
    .clearing { 
        display: block; 
        } 
    /* end hide from IE-Mac */ 
     
    /*]]>*/ 
    </style> 
      </head> 
     
      <body> 
        <div id="wrapper" class="clearing"> 
          <div id="banner"> 
            <h1>Generic Header</h1> 
          </div> 
          <!-- end banner --> 
     
          <div id="sidebar"> 
            <h2>Menu</h2> 
     
    <!-- the funny formatting in the list is for IE's white-space bug --> 
            <ul> 
              <li><a href="">menu item</a></li><li> 
     
    	      <a href="">menu item</a></li><li> 
     
    	      <a href="">menu item</a></li><li> 
     
    	      <a href="">menu item</a></li></ul> 
     
            <p>The background image in #wrapper extends the full length of 
            the page. So, it looks like the column is full length.</p> 
          </div> 
          <!-- end sidebar --> 
     
          <div id="main"> 
            <h2>Main Content</h2> 
     
            <p>The borders are set to <span 
            style="border-bottom: 1px dotted silver;" 
            title="one lies over the other">overlap</span>. If you know 
            which column will always be the longer, you may use only that 
            column's border. If you use color to separate the columns, the 
            background image in #wrapper should be total width of the float 
            column. Like the overlapping borders, this makes it appear that 
            both columns are full length.</p> 
          </div> 
          <!-- end main --> 
        </div> 
        <!-- end wrapper --> 
     
        <p id="footer">Footer Stuff &copy; &reg; &trade;</p> 
      </body> 
    </html>

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    MadCowIV
    Offline
    Regular
    Last seen: 17 years 32 weeks ago
    Timezone: GMT-7
    Joined: 2004-11-22
    Posts: 13
    Points: 0

    2 columns hate intimacy

    Sweet, the menus work. Thanks!

    Well, I guess I'll keep throwing random questions in here until someone tells me to shut up. Is there a particularly easy way to use transparent PNGs as background items in a div using CSS? Of course I mean to make it work in IE.

    Another WAY off-topic question: Anyone know where to find large Firefox/Thunderbird icons? PNG, ICO, don't really care about the format.

    I've got this page working beautifully with minor deviation in all browsers I've tried it in. There is only one bug in IE:Mac that I'm worrying about now. At the top of each news post, the title is being floated left so it doesn't tangle with the right column's floats in IE. However, IE:Mac is taking the lines that would be where the title is if the title wasn't there and those lines are being unbounded, in other words, those lines are going to full width rather than the several hundred I want them to be. If anyone has IE:Mac available to them, you can see what the crap I'm talking about at http://madcow.applyclan.com/projects/Alistair_Maxwell .

    Oh, one last thing. In Firefox and other non-IE browsers, I'm finding it difficult to get margins between the text and the titles in the posts on the page. IE has no problem with pushing off of the floated title, but Firefox seems reluctant to push against it to put the margin there. I have the floated title pushing down the text right now, but I want the text to be pushing against the float instead. I dunno if anyone knows what I mean enough to tell me how to fix that.

    As always, your responses are greatly appreciated!

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 1 year 18 weeks ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    2 columns hate intimacy

    I don't see any reason for #shirt h2 or #shirt p.date to be float. Simply do

    #shirt h2 {
        text-align: left;
        }
    
    .date {
        text-align: right;
        }
    Now they're in the flow. Set your margins, paddings, etc. as you will.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    MadCowIV
    Offline
    Regular
    Last seen: 17 years 32 weeks ago
    Timezone: GMT-7
    Joined: 2004-11-22
    Posts: 13
    Points: 0

    2 columns hate intimacy

    The problem with that is that now the top h2 sinks into the float above it (the site title box). As I tried to say earlier, I don't know how to make normal text push away from floats. Shouldn't be hard to, but for some reason I'm not getting it.

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 1 year 18 weeks ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    2 columns hate intimacy

    MadCowIV wrote:
    The problem with that is that now the top h2 sinks into the float above it (the site title box). As I tried to say earlier, I don't know how to make normal text push away from floats. Shouldn't be hard to, but for some reason I'm not getting it.
    I don't see a compelling reason to float that either. What you need is a crash course in how floats work.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    MadCowIV
    Offline
    Regular
    Last seen: 17 years 32 weeks ago
    Timezone: GMT-7
    Joined: 2004-11-22
    Posts: 13
    Points: 0

    2 columns hate intimacy

    I was afraid you'd say I didn't need that float. I already knew that I didn't, but it is there because I'm too lazy to develop another solution to a problem I'm having. If that problem were out of the way, I wouldn't be using those floats at all. I understand what a float is and what it does, and even when it should be used, but I'm cheating by using them. But, because I have been chastized for using them incorrectly, I will try one last time to find a better solution before giving up on making that part good CSS.

    MadCowIV
    Offline
    Regular
    Last seen: 17 years 32 weeks ago
    Timezone: GMT-7
    Joined: 2004-11-22
    Posts: 13
    Points: 0

    2 columns hate intimacy

    *sigh* I tried taking out all of the innapropriate floats and returned to two original problems. I still have not managed to remove the 3-pixel jog, so all of the content gets forced down. The forcing-down results when the float is removed from the h2 and .time elements which need to span across the whole main column. When I remove the float from the #top_hat (which is comrpised of the large blue area at the top and the page title in the light blue box directly below that) the right column drops below the level of the #top_hat. I find this really weird, because I can't get it to go to the right of it for anything. Even if every element in the #top_hat are told to be 20px across (rather than 538px or whatever it is), the right column will still be below the level of the bottom of the #top_hat.

    This is why I cheat. I hate constantly harrassing people to help me, so sorry guys. Hoping for a quick fix soon. Thanks!