SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opera and decimal percentage value

    Hi,

    While trying for a 3 col layout, I found that Opera 9.10 doesn't accept decimal percentage values e.g. 98.6% will be taken as 98% only in Opera but other browsers (IE 6.0 and Firefox 2.0.0.1) are displaying properly.

    Can anybody help me why is it so? It's really a problem when I want to aling the header with content area for same width.

    Thanks in advance

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera doesn't take kindly to decimals in percentages (neither do other browsers, but they're not as vocal about it). Why are you using percentages for your layout anyway?

  3. #3
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Dan,

    Thanks for your reply.

    Well, I never knew that other browsers too don't accept decimal percentage values. I was doing all these in order to align the header and content area. But still I found some difference when decimal is varied.

    By the way,

    Why are you using percentages for your layout anyway?
    Isn't using percentage value useful for layout? If %age is used then it will also scale up/down for different resolutions too...

    Can you help me please regarding this? What's the best way to specify widths? px or %age?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally prefer EM most of the time, since most of my layouts are based around text (menus, sidebars, content) rather than images (though tiled images do play a part).

    Can you post the code you have for the layout?

  5. #5
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I was playing around with decimal percentage values. Just see how it renders for different browsers! (screenshots attached) & code below:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Checking Percentage values</title>

    <style>

    .box {

    background: #999966;
    width: 200px;
    height: 200px;
    }

    .boxin1 {

    background: yellow;
    border: 1px solid;
    border-bottom: none;
    width: 20%;
    height: 20%;

    }
    .boxin2 {

    background: yellow;
    border: 1px solid;
    width: 20.3%;
    height: 20%;
    clear: both;
    border-bottom: none;

    }
    .boxin3 {

    background: yellow;
    border: 1px solid;
    width: 20.8%;
    height: 20%;

    }

    </style>
    </head>

    <body>
    <div class="box">
    <div class="boxin1">20%</div>
    <div class="boxin2">20.3%</div>
    <div class="boxin3">20.8%</div>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While I wait for the attachments to be approved (I don't have that power - I'm just a minion), I'm going to suggest that you take a look at how the browsers handle percentages at different browser widths - you'll be in for a rude shock.

    Also, since I can't see any float properties being applied, there's no need for the clear property to be applied. IE 6 will treat height as min-height, so there's really no real way you can expect it to behave in that regard. Oh, and you need to add the type="text/css" attribute to your <style> tag.

    I'll see what you're trying to achieve visually when the attachments are approved.

  7. #7
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Dan,

    I think you are mistaken... Those screenshots are the implementation of the code itself, what I pasted before.

    The layout what I was trying, came up to some shape but IE 6 is not very happy with that (when window is resized)

    Moreover, I am very very new to Web development so nothing much is known I am just practicing some layouts on my own without copy/paste from other locations. I have tried one. Just have a look. The previous one what you saw wasn't the real one and just a test of percentage values.

    Will you please tell me how will this layout work for other browsers (provided you have time to check ). Mistakes will be there because I am a newbie.

    Code here:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>.:.. 3 Column Layout ..:.</title>

    <style type="text/css">

    body {
    font: 10pt Arial, Helvetica, sans-serif;
    }

    #floatboxleft a {
    text-decoration: none;
    color: #fdfdfd;
    letter-spacing: 0.1em;
    text-align: center;
    }


    #floatboxright a {
    text-decoration: none;
    color: #fdfdfd;
    letter-spacing: 0.1em;
    margin: 1.8em;
    }

    #floatboxleft, #floatboxright p {
    text-align: center;
    color: #555;
    }

    #main {
    background: #eee;
    width: 90%;
    border: 1px solid #333;
    padding: 0 0.5em 0 0.5em;
    margin: 0 auto;
    position: absolute;
    margin: 1% 3% 1% 4%;
    }

    #floatboxleft {
    width: 20%;
    background: #aaa;
    border: 1px solid #777;
    float: left;
    }

    #floatboxright {
    width: 20%;
    background: #aaa;
    border: 1px solid #777;
    float: right;
    }

    #center {
    background: #fdfdfd;
    width: 100%;
    border: 1px solid #cc0000;
    float: left;
    }

    /* start hack for IE 6.0*/
    #content {
    padding: 1em;
    border: 1px solid #999;
    width: 55%;
    margin-left: 20.55%;
    }
    /* End hack */

    /* CSS Hack -- This will to make sure that the column lengths are displayed uniformly in IE, Fx & Opera. IE will take the previous div#content and will ignore this one because it doesn't support 'child selector >' but all other browsers will read the first div#content and will override it by the second decalration html>body #content because they accept the 'child selector' */
    html>body #content {
    padding: 1em;
    border: 1px solid #999;
    width: 55%;
    margin-left: 21%;
    }


    #head {
    height: 80px;
    background: #ccc;
    width: 99%;
    border: 1px solid #888;
    margin: 0 0 0.8em 0;
    padding: 0.3em;
    }

    #footer {
    background: #ddd;
    border-top: 2px solid #aaa;
    height: 30px;
    width: 100%;
    clear: both;
    margin-top: 0.3em;
    }

    </style>


    </head>

    <body>
    <div id="main"><b><center>................. ||| My 3 col layout ||| .................</center></b><br />

    <div id="head"><b>Headerbr /></b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fringilla ullamcorper odio. Vivamus suscipit, elit quis fermentum placerat, erat neque tempor ligula, vel dignissim nibh nulla sed pede. Morbi sit amet massa. Curabitur dapibus molestie elit. </div>


    <div id="center">
    <div id="floatboxleft">
    <p><b>Left Menu</b></p>
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />

    </div>
    <div id="floatboxright">
    <p><b>Right Menu</b></p>
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />
    <a href="#">--Test Link--</a><br />

    </div>

    <div id="content">
    <b>Content/b><br />
    <p>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fringilla ullamcorper odio. Vivamus suscipit, elit quis fermentum placerat, erat neque tempor ligula, vel dignissim nibh nulla sed pede. Morbi sit amet massa. Curabitur dapibus molestie elit. Nullam ultricies facilisis nunc. Quisque feugiat, mi id imperdiet molestie, ipsum sem aliquet purus, ac iaculis arcu pede et orci. Mauris eu mauris. In tempus odio a lacus. Sed vestibulum velit at neque. Phasellus suscipit cursus massa. Vivamus molestie. Nulla varius, velit quis tempor blandit, libero nunc adipiscing nisi, ac tempus ipsum enim nec est. Integer massa felis, convallis sit amet, congue sed, consectetuer in, dui. Phasellus tristique, lacus ac mattis euismod, purus tortor condimentum nibh, nec tincidunt elit elit id nibh. Maecenas arcu mauris, sagittis ut, mattis sed, pretium sit amet, sem. Sed placerat, sem vitae convallis adipiscing, orci est venenatis ante, quis euismod lacus dui eleifend tortor. Fusce cursus sapien. Aenean lectus sapien, gravida sit amet, pellentesque eu, ultrices a, orci. Nulla imperdiet, pede ac euismod gravida, ipsum leo convallis elit, ac fermentum orci tortor ac nibh.</p>
    <p> Nulla vitae neque sagittis mauris accumsan tempus. Aliquam congue viverra dolor. Praesent venenatis turpis ac lacus. Nullam condimentum tempor dolor. Phasellus mattis. Nullam nulla leo, bibendum sit amet, rhoncus a, vehicula quis, augue. Nulla aliquam, eros et aliquet sodales, nulla massa ullamcorper nulla, et accumsan eros lorem a odio. Integer adipiscing aliquam magna. Praesent scelerisque, sem vel congue suscipit, quam sapien fermentum felis, non laoreet dui quam eget dui. Donec nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla massa nulla, vehicula a, lobortis ac, blandit vel, magna. Mauris quis dui. Duis lobortis dolor ac felis molestie ullamcorper. Vestibulum scelerisque, ante eu commodo posuere, metus augue egestas ipsum, eget porttitor diam est ullamcorper purus. Ut enim eros, cursus id, vehicula eu, sollicitudin a, lorem.</p>
    <p> Nulla vitae neque sagittis mauris accumsan tempus. Aliquam congue viverra dolor. Praesent venenatis turpis ac lacus. Nullam condimentum tempor dolor. Phasellus mattis. Nullam nulla leo, bibendum sit amet, rhoncus a, vehicula quis, augue. Nulla aliquam, eros et aliquet sodales, nulla massa ullamcorper nulla, et accumsan eros lorem a odio. Integer adipiscing aliquam magna. Praesent scelerisque, sem vel congue suscipit, quam sapien fermentum felis, non laoreet dui quam eget dui. Donec nisi. Vestibulum ante ipsum primis</p>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum fringilla ullamcorper odio. Vivamus suscipit, elit quis fermentum placerat, erat neque tempor ligula, vel dignissim nibh nulla sed pede. Morbi sit amet massa. Curabitur dapibus molestie elit. </p>

    </div>
    <div id="footer">--- This is the Footer ---</div>
    </div>


    </div>
    </body>
    </html>

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm pretty tired right now, and I've been up all night as it is (trying to recover data from my computer).

    For now though, you have some depreciated elements (<center> among them) in your HTML code, which will cause the page to fail validation. This may not sound important, but the best way to get a page to work properly cross-browser is to use error-free code along with a complete and proper DOCTYPE. Afterall, having every browser following the same rules is a lot better than having browsers X, Y and Z doing whatever they want to do.

    The best way to mark up a page like you have is to define the structure of what you're going to be doing. Without taking your code and putting it into a text editor, I can see a header, two menus, a main content area and a footer.

    The header can be taken care of using a <h1> element for the page heading, with the menus being a pair of unordered lists. The headings above the menu links and the main content area can be <h2>s which will help further define what the page is about.

  9. #9
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    Thanks for your valuable Suggestion!

    Well, I know that those centering using <center> is deprecated. That was for quick look-n-feel. Before uploading, I always try to validate pages

    There are so many ways of doing the same 3 column layout. I was just wondering what could be the best one supporting most of the browsers.

    I am sorry for not replying on Friday as I was leaving office Lots of work is there but still stealing some time for my personal enrichment

    Lets see what happens next. We mostly do 'Application Design'.

    Will catch you again!

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm working on a few ways to make three column layouts that use some extremely simple HTML (so simple it's complex, ) matched with some complex applications of CSS. Fortunately I was able to recover most of my hard drive, so I'll see if my latest WIP is among the "refugees" .

  11. #11
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Dan!!

    Could you please tell me the basic difference between Fixed, Fluid, Elastic & Liquid layouts? Though some of them may be the same and share the same name but nowhere I got the definitions of all.

    Thanks in advance for sharing your time

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not Dan, but I'll answer for him.

    Fluid and Liquid mean the same thing, which is that percentage widths were used, which causes layouts to expand and contract based on the width of the viewport.

    Elastic means that EMs were used to specify widths, which causes layouts to expand and contract based on the font-size.

    Fixed means that the widths are set in an "absolute" unit, e.g. pixels.

    Those are the 3 basic types. There are also combinations of those and some that use max-width and/or min-width to constrain (limit) how wide an elastic or liquid layout can be.

    You can read more about it here: Fixed vs Liquid vs Elastic

    Off Topic:

    Quote Originally Posted by Dan Schulz
    Fortunately I was able to recover most of my hard drive
    Glad to hear it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Slips Kravvitz a $50


    Basically what Kravvitz just said.

  14. #14
    SitePoint Enthusiast Sumi's Avatar
    Join Date
    Dec 2005
    Location
    India
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow!

    That's really great!

    I wish that I shouldn't have wasted my time searching information here and there. I really get a quick and to the point information on whatever I ask here.

    Thanks a lot

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just wish my computer hadn't died on me. I had that PC set up as my Web design/development workstation.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •