38 users online (1 members and 37 guests)  


  Results 1 to 7 of 7

Related

  1. I need help with making a layout for myspace.    Forum: Myspace Forum
    Replies: 1
  2. Making Div Layout.    Forum: HTML Forum
    Replies: 7
  3. CSS Layout - 3 Column Plus    Forum: HTML Forum
    Replies: 3
  4. Replies: 5
  1. #1
    Luhmann's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2003
    Posts
    5

    Making two column layout work with IE

    I can see that this issue has been much talked about in these fourms, but it seems as if every case is a little different. On http://keywords.oxus.net/ I was able to get two columns to appear side by side with the following code. However, it doesn't seem to work well on Internet Explorer on the Mac. It is fine in Safari and Camino, but I haven't tried any Window based browsers. I would greatly appreciate any tips on making sure this works cross platform and cross browser. Right now the problem is that the right column pops up and down (below the bottom of the left column) depending on the width of the IE browser window.

    Code:
     #content
    {
    	float: left;
    	width: 55%;
    	background: #FFF;
    	margin-bottom: 20px;
    	margin-top: 15px;
    	padding-right: 10%;
    	padding-left: 10%;
    }
    
    #links
    {
    	float: right;
    	width: 25%;
    	background: #e0e0b1;
    	color: #CCC;
    }
    Thanks for any tips or suggestions!!!

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi there,

    I would expect the right column to 'make way' for the left if the browser was not wide enough, as float tends to be quite 'nice' like this.

    Usually, the only way to ensure this does not happen would be to use a mixture of absolute and relative positioning.

    I have found some excellent (cross-browser!) examples in the following sites (even if you dont use the examples, they are well worth a read)

    http://glish.com/css/

    http://www.bluerobot.com/web/layouts/ (this is my favourite)

    have a look at how they have done it. Might help.

    by the way, as a mac css guy you would be very handy round here.. I have not had the oppurtunity to code for a mac, so your experience would be very useful. Welcome!
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Luhmann's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2003
    Posts
    5
    I had seen those pages when doing google searchs for ths. I don't understand what is going on in the blue robot one. His comments are very mysterious to me:

    /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
    Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
    IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
    declaration. The incorrect IE5/Win value is above, while the correct value is
    below. See http://glish.com/css/hacks.asp for details. */
    voice-family: "\"}\"";
    voice-family:inherit;
    height:14px; /* the correct height */
    }
    /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
    length values to user agents that exhibit the parsing error exploited above yet get
    the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
    a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
    body>#Header {height:14px;}
    It seems you have to know what the problem he is solving is in order to understand what he is talking about. Any explanation would be greatly appreciated.

    His example also seems to specify exactly how many pixels each part should be. Is it possible to use absolute positioning with percentages so that it all adjusts with the width of the browser window?

  4. #4
    Luhmann's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2003
    Posts
    5
    The problem I had with the glish.com soultion - and I think this is the same as the default Movable Type solution - is that the content on one side would tend to expand to the whole width of the screen when the content on the other side wasn't long enough.

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Post 1 - It is reffering to Internet Explorers broken box model. eg, you define a box 200px wide. You add a 1px border to it. the border should go outside the box, making it 202 px wide. In IE, it goes inside the box, and is wrong.

    Post 2 - With the Glish code, is this on the mac or cross-browser?
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    Luhmann's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2003
    Posts
    5
    Well, here is an example. I created a test blog:

    http://keywords.oxusnet.net/test/

    And I built it using the style sheet "rusty" located on this page:

    http://www.movabletype.org/default_styles.shtml#rusty

    Now, on my browser, when the text is small, the right menu wraps around to take up the whole screen if the left side isn't long enough. I believe that this CSS is the same as the one from glish.com in how it handles the two columns. I don't have a windows PC to test how it looks there.

  7. #7
    Luhmann's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2003
    Posts
    5

    Give up

    I have given up. I am not a CSS junkie, and it seems like the best way to meet my objectives (truly cross-platform support for any browser) would be to use tables. Moreover, I learned that tables can be manipulated via a stylesheet with tags like:

    td.content {...}

    so I can still easily change the style - if not the layout, with CSS. It would be nice if all browsers supported CSS the same way, but they don't, so this will have to do for now.

    Note that the test site is now an experiment with table/CSS mixing so it no longer reflects the glish.com design.



Tags for this Thread