SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners, cross browser, transparent png

    In my layout on http://vih.dk I use transparent png and some javascript to apply my graphics for rounded corners. It looks great in IE7 and FF, but there is some trouble in IE6.

    The layout has to be fixed width and flexible height. Also I need less whitespace in the footer. Finally, I need the three bars to extend all the way down to the footer (div#navigation, div#content-sub, div#content-main), and have the right bar (div#content-sub) to have a rounded corner in the bottom. However, at the moment I applied a technique for making them equal lenght that makes it impossible.

    I am interested in making it as simple as possible, both html and css. I do not mind that the layout does not look the same in all browsers, but it needs to be nice and usable in all browsers. That is, it is not essential, that the layout has for instance rounded corners in IE6.

    I hope that all you clever folks here can help me. I have been struggling with these issues for several days. I just want the best possible markup and css.

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone. My site is giving me a lot of headaches in IE5.5, IE6.0 and IE7.0 when running under Windows XP. IE7 is fine from Windows Vista.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I had a look at this earlier and the problem is due to the fact that you are repeating transparent images to get your shadow effects but the IE pngfix will only scale images and therefore everything is out of alignment.

    You may need to lose the pngfix on any background images that need to be repeated and use normal non-transparent images for IE6.

    The pngfix is fine for images that are a fixed height and width but if you want them to be repeated then there is no option for this. The alpha image loader scales the image to match the parent container which will result in the image being stretched in some way. You could use massive images and have them cropped instead but the overheads would be considerable.

    The simplest solution would be to provide ie6 and under with non transparent images (e.g. a solid shadow) and save all the problems associated with the pngfix.

    I'll have another look at your page this afternoon and see if I can offer improvements but I think the stumbling block is that we will need to use either of the "crop", "scale" or "image" attributes of the "alpha-image-loader" and the pngfix doesn't allow for all three to be available on an image by image basis.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok, I've spent about an hour on this now which is way too long as I've got work to do

    I've removed the pngfix and applied the filter directly to the images that can take it as some needed to be cropped, scaled or image size. You cannot use the method that you are using for the sides and bottom shadows because you are placing a single image using background positions which can't be done for ie6 at all.

    As I said above you have to use images that are either image size, scaled or cropped and need no positioning. You would need to make new images and for ie that could be allowed to stretch vertically but would need to be an exact width (similar to the side borders in this example). You will probably need extra divs for this. therefore I have just removed the images for ie6 and under as it is getting far too complicated already.

    Copy the code below, save it and then view it in the browser while you are online and you should be able to see what it looks like without any effort. Then you can decide if its good enough and then amend your code accordingly.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Vejle Idr&#230;tsh&#248;jskole - en h&#248;jskole for livet</title>
    <meta name="description" content="Vejle Idr&#230;tsh&#248;jskole tilbyder forskellige h&#248;jskolekurser. Vi er en h&#248;jskole med idr&#230;tten som samlingspunkt.">
    <meta name="keywords" content="jyske, idr&#230;tsskole, idr&#230;tsh&#248;jskoler, idr&#230;tsh&#248;jskole, h&#248;jskole, h&#248;jskoler, h&#248;jskolekursus, h&#248;jskolekurser, kursus, korte kurser, sommerkurser">
    <style type="text/css">
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
        margin:0;
        padding:0;
    }
    
    #content-sub {
        padding-top: 50px;
    }
    
    #content-sub * {
        padding: 5px 15px;
    }
    
    #content-sub * * {
        padding: 5px 0px;
    }
    
    #navigation {
        padding-top: 50px;
    }
    
    #content-main * {
        padding: 5px 15px;
    }
    
    #content-main * * {
        padding: 5px 0px;
    }
    
    #navigation * {
        padding: 5px 15px;
    }
    
    #navigation * * {
        padding: 5px 0px;
    }
    
    #ft * {
        padding: 5px 15px;
    }
    #ft * * {
        padding: 5px 0px;
    }
    
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    
    fieldset, img {
        border:0;
    }
    
    address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
    }
    
    ul li {
        list-style:none;
    }
    
    caption,th{
        text-align:left;
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size:100&#37;;
        font-weight:normal;
    }
    
    q:before,q:after {
        content:'';
    }
    
    abbr,acronym {
        border:0;
        font-variant:normal;
    }
    
    sup {
        vertical-align:
        text-top;
    }
    
    sub {
        vertical-align: text-bottom;
    }
    
    input,textarea,select{
        font-family:inherit;
        font-size:inherit;
        font-weight:inherit;
    }
    
    legend{
        color:#000;
    }
    
    body {
        text-align:center;
        font:13px/1.231 arial,helvetica,clean,sans-serif;
        *font-size:small;
        *font:x-small;
    }
    
    table {
        font-size:inherit;
        font:100%;
    }
    
    pre,code,kbd,samp,tt{
        font-family:monospace;
        *font-size:108%;
        line-height:100%;
    }
    
    /* layout */
    
    #ft{
        clear:both;
    }
    
    .yui-b{
        position:relative;
    }
    
    .yui-b{
        _position:static;
    }
    
    #yui-main .yui-b{
        position:static;
    }
    
    #yui-main{
        width:100%;
    }
    
    .yui-t2 #yui-main {
        float:right;
        margin-left:-25em;
    }
    
    .yui-t2 .yui-b{
        float:left;
        width: 180px;
    }
    
    .yui-t2 #yui-main .yui-b{
        margin-left: 195px;
    }
    
    #yui-main .yui-b{
        float:none;width:auto;
    }
    
    .yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gb .yui-u,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{
        float:left;
    }
    
    .yui-gb .yui-u{
        float:right;
    }
    
    .yui-gb div.first{
        margin-left:0;
        float:left;
    }
    
    .yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{
        margin-right:0;
    }
    
    .yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{
        margin:0;
    }
    
    .yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{
        float:right;
    }
    
    .yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{
        margin-left:0;
    }
    
    .yui-ge .yui-u,.yui-ge .yui-g,.yui-gf div.first{
        width: 180px;
    }
    
    .yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{
        float:right;
    }
    
    .yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first {
        float:left;
    }
    
    .yui-ge div.first,.yui-gf .yui-g,.yui-gf .yui-u{
        width: 600px;
    }
    
    .yui-ge .first {
        float: left;
    }
    
    #bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    
    #bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}.yui-gb .yui-u{
        float:left;
    }
    
    /* specific */
    
    html {
        background: transparent;
        color:#000;
    }
    
    body {
        height: 100%;
        font-size: 0.9em;
        background: transparent url(http://vih.dk/gfx/background/soccerfield.jpg);
    }
    
    body.fodbold, body.fodboldakademi {
        background: transparent url(http://vih.dk/gfx/background/soccerfield.jpg);
    }
    
    body.bestilling {
        background: transparent url(http://vih.dk/gfx/background/haandvaegte.jpg);
    }
    
    body.gymnastik, body.spring, body.aerobic, body.fitness, body.fitnessogsundhed, body.organisation {
        background: transparent url(http://vih.dk/gfx/background/ribber.jpg);
    }
    
    body.handball, body.faciliteter {
        background: transparent url(http://vih.dk/gfx/background/gulv.jpg);
    }
    
    body.badminton, body.volleyball, body.underviser {
        background: transparent url(http://vih.dk/gfx/background/net.jpg);
    }
    
    body.haandbold, body.photogallery {
        background: transparent url(http://vih.dk/gfx/background/hallen.jpg);
    }
    
    table {
        clear: both;
        border-collapse: separate;
        margin: 5px 15px 15px 15px;
        width: 90%;
    }
    
    table caption {
        background: transparent;
        text-align: left;
        margin: 10px 15px;
        font-weight: bold;
        text-transform: uppercase;
        color: grey;
        letter-spacing: 0.2em;
    }
    
    td, th {
        padding: 0.2em;
    }
    
    table td, table th {
        border: 2px solid white;
        text-align: center;
        background: #FBBD11;
    }
    
    table th {
        font-weight: bold;
    }
    
    table tr.standard td {
        background: white;
    }
    
    table tr.aar td {
        background: #D4982A;
        font-weight: bold;
        color: white;
    }
    
    table tr.food td {
        background: #D4982A;
        font-weight: bold;
        color: white;
    }
    
    #container {
        min-height: 350px;
        padding: 15px;
        margin: 100px auto;
        width: 1045px;
        text-align:left;
        position: relative;
    
    }
    
    #bd, #hd, #ft {
        width: 995px;
    }
    
    .christmas #container {
        margin: 100px auto;
    }
    
    div.middle {
        background-image: url(http://vih.dk/gfx/container/middle.png);
        background-position: top left;
        background-repeat: y-repeat;
    }
    
    div.top {
        background-image: url(http://vih.dk/gfx/container/top.png);
        background-position: top left;
        background-repeat: no-repeat;
    }
    
    div.bottom {
        background-image: url(http://vih.dk/gfx/container/bottom.png);
        background-position: bottom left;
        background-repeat: no-repeat;
        padding: 15px 30px 50px 15px;
    }
    
    
    #hd {
        padding: 15px;
        background-image: url(http://vih.dk/gfx/logo/logo.jpg);
        background-repeat: no-repeat;
        background-position: 814px top;
        height: 55px;
            position:relative;
            width:auto;
    }
    
    #hd h1 {
        display: none;
    }
    
    #hd h1 a {
        color: grey;
        text-decoration: none;
    
    }
    
    #hd h1 a:hover {
        color: grey;
        text-decoration: underline;
    }
    
    #bd {
        /* neccessary to have ie render props correctly */
        position:relative;
        overflow: hidden;
    }
    
    #content-main ul, #content-main ol {
        margin: 0.5em 1em;
    }
    
    #content-main ul li {
        list-style-type: square;
    }
    
    #frontpage #content-main {
        background-repeat: no-repeat;
        padding-top: 190px;
    }
    
    .widepicture #content-main {
        background-repeat: no-repeat;
        padding-top: 190px;
    }
    
    .widepicture #content-main {
        min-height: 240px;
    }
    
    #content-main {
        padding-bottom: 1000em;
        margin-bottom: -998em;
        overflow: hidden;
    }
    
    #content-main .vevent {
        clear: both;
    }
    
    #content-main  .vevent span {
        display: block;
        font-size: 10px;
        line-height: 1em;
        text-align: center;
        text-transform: uppercase;
        text-shadow: #fff 1px 1px 1px;
        color: #BDBDBD;
        margin-right: 1em;
        float: left;
        width: 35px;
        padding-top: 5px;
        border: 1px solid #ccc;
        margin-bottom: 1em;
    }
    
    #content-main  .vevent span .day {
        display: block;
        font-weight: bold;
        font-size: 20px;
        letter-spacing: -2px;
        text-indent: -3px;
        text-shadow: #bbb 2px 2px 0;
        color: #ddd;
        padding-bottom: 5px;
        margin: 0;
        border: none;
    }
    
    #content-main .vevent a  {
        text-decoration:none;
    }
    
    #content-main .vevent a:hover  {
        text-decoration: underline;
    }
    
    #content-main  .vevent h2.summary { /* h2 bruges ved nyhederne */
        margin-bottom: 0;
        padding: 0;
        font-size: 1em;
    }
    
    #content-main  .vevent .description {
        margin-top: 0;
        padding: 0;
    }
    
    #content-main h1 {
        font-weight: bold;
        font-size: 1.3em;
    }
    
    #content-main h2 {
        font-weight: bold;
        font-size: 1.1em;
    }
    
    #content-main h3 {
        font-weight: bold;
    }
    
    #content-main h4 {
        font-weight: bold;
    }
    
    #content-main  table td, #content-main  table th {
        padding: 0.2em;
    }
    
    #content-main form table td, #content-main form table th {
        background: #ddd;
        text-align: left;
    
    }
    
    .sidepicture #content-main {
        background-repeat: no-repeat;
        padding-left: 275px;
        margin-right: -275px;
        width: 345px;
        min-height: 370px;
    }
    
    #content-sub {
        background: #B42409 url(http://vih.dk/gfx/container/subcontent.png) no-repeat bottom right;
        color: white;
        padding-bottom: 1000em;
        margin-bottom: -998em;
        height: 100%;
        overflow: hidden;
    }
    
    #content-sub h2 {
        font-size: 1.2em;
        font-weight: bold;
    }
    
    #content-sub .vevent span.dtend {
        text-transform: uppercase;
        font-size: 0.7em;
    }
    
    #content-sub .vevent h2.summary {
        border: none;
        background: transparent;
        font-size: 0.9em;
        margin: 0;
        padding: 0;
        margin-bottom: 0;
    }
    
    #content-sub .vevent .description {
        margin: 0 0 1em 0;
        padding: 0;
        display: none;
    }
    
    #content-sub a {
        color: white;
        text-decoration:none;
    }
    
    #content-sub a:hover {
        color: white;
        text-decoration: underline;
    }
    
    #navigation {
        background: #B42409 url(http://vih.dk/gfx/container/navigation.png) no-repeat top left;
        color: white;
        padding-bottom: 1000em;
        margin-bottom: -994em;
        height: 100%;
    }
    
    #navigation a {
        color: white;
        text-decoration: none;
    }
    
    #navigation a:hover {
        color: white;
        text-decoration: underline;
    }
    
    #navigation li#current a {
        color: white;
        text-decoration: underline;
    }
    
    #navigation-sites {
        list-style-type: square;
    }
    
    #navigation-sites li#efterskolen {
        list-style-type: square;
        color: green;
    }
    #navigation-sites li#kursuscenteret {
        list-style-type: square;
        color: cyan;
    }
    #navigation-sites li#elevforeningen {
        list-style-type: square;
        color: orange;
    }
    
    #navigation-sites li a {
        color: grey;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9em;
        font-weight: bold;
        letter-spacing: 0.2em;
    }
    
    #navigation-sites li a:hover {
        color: grey;
        text-decoration: underline;
    }
    
    #prop {
        height: 245px;
        width: 300px;
        position: absolute;
        top: -100px;
        left: 10%;
        background: url(http://vih.dk/gfx/props/fodboldstovle.png);
        z-index: 100;
    }
    * html #prop {    
        background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://vih.dk/gfx/props/fodboldstovle.png',sizingMethod='image');
    }
    
    .fag #prop, .bestilling #prop {
        height: 250px;
        width: 250px;
        left: 25%;
        background: url(http://vih.dk/gfx/props/haandbold.png);
    }
    
    .underviser #prop {
        height: 200px;
        width: 200px;
        left: 0%;
        background: url(http://vih.dk/gfx/props/haandball.png);
    }
    
    .fodboldakademi #prop, .fodbold #prop {
        height: 187px;
        width: 200px;
        top: -100px;
        right: 150px;
        background: url(http://vih.dk/gfx/props/futsal.png);
    }
    
    .volleyball #prop, .organisation #prop {
        height: 170px;
        width: 200px;
        top: -100px;
        right: -50px;
        background: url(http://vih.dk/gfx/props/volleyball.png);
    }
    
    .christmas #prop {
        height: 175px;
        width: 250px;
        top: -104px;
        left: 50%;
        background: url(http://vih.dk/gfx/props/nisse.png);
    }
    
    .faciliteter #prop {
        height: 300px;
        width: 300px;
        top: 80%;
        bottom: 300px;
        left: 40%;
        background: url(http://vih.dk/gfx/props/lobesko.png);
    }
    
    .photogallery #prop {
        height: 245px;
        width: 300px;
        bottom: -100px;
        left: 40%;
        background: url(http://vih.dk/gfx/props/fodboldstovle.png);
    }
    
    .haandbold #prop {
        height: 200px;
        width: 200px;
        bottom: -100px;
        left: 40%;
        background: url(http://vih.dk/gfx/props/haandball.png);
    }
    
    .badminton #prop {
        height: 200px;
        width: 210px;
        top: -100px;
        left: 45%;
        background: url(http://vih.dk/gfx/props/fjerbold.png);
    }
    
    
    /* courses */
    .courses-empty {
        border: 2px solid #ccc; background: #eee; padding: 1em 1em; margin: 1em 15px;
    }
    
    table.skema {
        font-size: 0.9em;
    }
    
    /*
    p.rss-big {
        background: url(http://vih.dk/gfx/icons/rss96px.png) no-repeat 1em 1em;
        padding: 3em 1em 1em 130px;
        height: 110px;
        border: 1px solid #ddd;
    }
    */
    
    
    
    /* faciliteter */
    
    dl#faciliteter {
        background: transparent url(http://vih.dk/gfx/images/oversigtsbillede.jpg) no-repeat 5px 6px;
        display: block;
        width: 510px;
        height: 345px;
        position: relative;
    
    }
    
    dl#faciliteter dt {
        display: none;
    }
    
    dl#faciliteter dd a {
        display: none;
    }
    
    dl#faciliteter dd a#f20:hover, dl#faciliteter dd a#f9:hover, dl#faciliteter dd
    
    a#f23:hover, dl#faciliteter dd a#f13:hover, dl#faciliteter dd a#f16:hover,
    
    dl#faciliteter dd a#f14:hover, dl#faciliteter dd a#f24:hover, dl#faciliteter dd
    
    a#f11:hover, dl#faciliteter dd a#f15:hover, dl#faciliteter dd a#f17:hover,
    
    dl#faciliteter dd a#f2:hover, dl#faciliteter dd a#f7:hover {
        opacity: 0.8;
        filter: alpha(opacity=80);
    }
    
    dl#faciliteter dd a#f20, dl#faciliteter dd a#f9, dl#faciliteter dd a#f23,
    
    dl#faciliteter dd a#f13, dl#faciliteter dd a#f16, dl#faciliteter dd a#f14,
    
    dl#faciliteter dd a#f24, dl#faciliteter dd a#f11, dl#faciliteter dd a#f15,
    
    dl#faciliteter dd a#f17, dl#faciliteter dd a#f2, dl#faciliteter dd a#f7 {
        display: block;
        background-color: white;
        opacity: 0.4;
        filter: alpha(opacity=40);
        position: absolute;
        padding: 0 0.2em;
    }
    
    a#f13 { /* fodboldbanen */
        top: 80px;
        left: 250px;
    }
    
    a#f16 { /* gymnastiksalen */
        top: 225px;
        left: 320px;
    }
    
    a#f14 { /* hallen */
        top: 260px;
        left: 300px;
    }
    
    a#f9 { /* kunstgr&#230;s */
        top: 130px;
        left: 30px;
    }
    
    a#f23 { /* beachvolley */
        top: 65px;
        left: 30px;
    }
    
    a#f24 { /* streetbasket */
        top: 200px;
        left: 60px;
    }
    
    a#f11 { /* swimmingpool */
        top: 250px;
        left: 200px;
    }
    
    a#f17 { /* td-rum */
        top: 275px;
        left: 250px;
    }
    
    a#f15 { /* tr&#230;ningssalen */
        top: 290px;
        left: 250px;
    }
    
    
    a#f2 { /* globen */
        top: 230px;
        left: 150px;
    }
    
    a#f7 { /* spissalen */
        top: 180px;
        left: 340px;
    }
    
    a#f20 { /* skoven */
        top: 310px;
        left: 20px;
    }
    
    #content-main h2.faglist {
         background:black;
         color:white;
         padding: 0.5em 0.5em 0.5em 0.5em;
    }
    
    #content-main h3.faglist-group {
         background:#ddd;
         color:white;
         padding: 0.5em 0.5em 0.5em 0.5em;
    }
    
    form table {
        border-collapse:collapse;
    }
    
    .cbb {
        padding:0 10px;
        border:1px solid #666;
        background:#fff;
    
    }
    /* Normal styling */
    .cb {margin:0.5em 0;}
        /* Top corners and border */
    .bt {
        height:70px;
        margin:0 0 0 -11px;
        background:url(http://vih.dk/gfx/container/box.png) no-repeat 0 0;
    }
    * html .bt {    
        background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://vih.dk/gfx/container/box.png',sizingMethod='crop');
    width:1024px;
    }
    
    .bt div {
        position:relative;
        left:0px;
        width:0px;
        height:70px;
        background:url(http://vih.dk/gfx/container/box.png) no-repeat 0 0;
        font-size:0;
        line-height:0;
    }
    
        /* Bottom corners and border */
    .bb {
        height:84px;
        margin:0 0 -50px -11px;
        background:url(http://vih.dk/gfx/container/box.png) no-repeat 100% 100%;
    }
    * html .bb {    
        background:none;
    }
    
    
    .bb div {
        position:relative;
        top: 0px;
        left:0px;
        height:84px;
        background:url(http://vih.dk/gfx/container/box.png) no-repeat 0 100%;
        font-size:0;
        line-height:0;
    }
    * html .bb div{    
        background:none;
    }
        /* Left border */
    .i1 {
        margin: 0 0 0 -11px;
        padding:0 0 0 1px;
        background:url(http://vih.dk/gfx/container/borders.png) repeat-y 0 0;
    }
    * html .i1 {    
        background:none;
    }
    
        /* Right border */
    .i2 {
        margin: 0 16px 0 0;
        padding:0 17px 0 0;
        background:url(http://vih.dk/gfx/container/borders.png) repeat-y 100% 0;
    }
    * html .i2 {    
        background:none;
    }
    
    
        /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
    .i3 {
        display:block;
        margin:0;
        padding:1px 11px;
        background:#fff;
    }
        /* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
    .i3:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .i3 {display:inline-block;}
    .i3 {display:block;}
    /* Default CSS ends here */
    
    
    .cb #hd {
        margin-top: -50px;
    }
    
    .frontpage #content-main h1 {
        background: url(http://vih.dk/gfx/logo/overskrift.png) no-repeat;
        margin-left: -215px;
        height: 68px;
        width: 500px;
    }
    * html .frontpage #content-main h1 {    
        background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://vih.dk/gfx/logo/overskrift.png',sizingMethod='image');
    }
    
    .frontpage #content-main h1 span {
        display: none;
    }
    </style>
    <link rel="stylesheet" type="text/css" media="screen" href="http://vih.dk/scripts/sifr/sIFR-screen.css">
     <link rel="stylesheet" type="text/css" media="print" href="http://vih.dk/css/print.css">
    <script type="text/javascript" src="http://vih.dk/scripts/sifr/sifr.js"></script>
    <script type="text/javascript" src="http://vih.dk/scripts/cb.js"></script>
    </head>
    <body id="vih" class="sidepicture frontpage">
    <div id="container" class="yui-t2 cbb">
        <div id="hd">
            <h1><a href="http://vih.dk/">Vejle Idr&#230;tsh&#248;jskole</a></h1>
        </div>
        <div id="bd">
            <div id="yui-main">
                <div class="yui-b">
                    <div class="yui-ge">
                        <div class="yui-u first" id="content-main" style="background-image: url(http://vih.dk/file.php?/vih/etk7vJyqe3RYzepCaTwaasdAvs3u56Yrpap2K4gPVfWCjt6Bus/sidepicture/Idr%C3%A6tsh%C3%B8jskolen+99+%28683x1024%29.jpg)">
                            <h1><span>H&#248;jskole &mdash; skole for livet</span></h1>
                            <p>Vi plejer at sige, at det er ambiti&#248;se mennesker, der v&#230;lger et ophold p&#229; Vejle Idr&#230;tsh&#248;jskole. Vi har sporten som ramme, men bag den ligger det, at f&#229; udviklet en r&#230;kke personlige og sociale kvaliteter. Det handler om at udfordre og udvikle sig selv, se muligheder, kunne rumme andre og have modet til at forf&#248;lge sine dr&#248;mme.</p>
                            <p>Livsgl&#230;de udleves ikke p&#229; sofaen, men i et aktivt liv, hvor man involverer sig og har energien til at g&#248;re en forskel. S&#229; velkommen p&#229; vih.dk. H&#229;ber at du vil blive inspireret de n&#230;ste minutter...</p>
                            <p>Lars Kj&#230;rsgaard<br>
                                Forstander</p>
                            <!--
                <ul class="questions">
                    <li><a class="when" href="http://vih.dk/langekurser">Hvorn&#229;r kan jeg starte?</a></li>
                    <li><a class="what" href="http://vih.dk/fag">Hvad kan jeg v&#230;lge?</a></li>
                </ul>
                -->
                            <!--
                    <p>En <a href="http://vih.dk/index/hojskole.php">h&#248;jskole</a> er den perfekte ramme at sparke lidt til livet i &mdash; og vi har <a href="http://vih.dk/underviser">underviserne</a> og <a href="http://vih.dk/faciliteter">faciliteterne</a> til det. Vil du v&#230;re med? Vi tilbyder b&#229;de <a href="http://vih.dk/langekurser">lange</a> og <a href="http://vih.dk/kortekurser">korte</a> h&#248;jskolekurser. Ring til os p&#229; 75820811 og f&#229; en forklaring eller <a href="http://vih.dk/info">l&#230;s mere om os</a>.</p>
                -->
                        </div>
                        <div class="yui-u" id="content-sub">
                            <h2>Sidelinjen</h2>
                            <p><a href="http://vih.dk/langekurser/elevchat">Chat med en tidligere elev</a></p>
                            <div class="vevent"> <span class="dtend" title="20071226"> dec <span class="day">26</span> </span>
                                <h2 class="summary"><a rel="bookmark" href="http://vih.dk/nyheder/671" class="url">Sne, sol og ski kalder....</a></h2>
                                <p class="description">VIH`s &#229;rlige skitur n&#230;rmer sig. Allerede i uge 5 tager...</p>
                            </div>
                            <div class="vevent"> <span class="dtend" title="20071214"> dec <span class="day">14</span> </span>
                                <h2 class="summary"><a rel="bookmark" href="http://vih.dk/nyheder/669" class="url">"Songs in the dark" koncert</a></h2>
                                <p class="description">Torsdag aften var et forventningsfuldt publikum m&#248;dt op til Stemmen...</p>
                            </div>
                            <div class="vevent"> <span class="dtend" title="20071124"> nov <span class="day">24</span> </span>
                                <h2 class="summary"><a rel="bookmark" href="http://vih.dk/nyheder/668" class="url">Ny forkvinde for Elevforeningen</a></h2>
                                <p class="description">Efter n&#230;sten 7 &#229;r p&#229; posten, har Jan Buur Frederiksen...</p>
                            </div>
                            <p><a href="http://vih.dk/nyheder">Flere nyheder</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="yui-b">
                <ul id="navigation">
                    <li><a href="http://vih.dk/faciliteter">Rundvisning</a></li>
                    <li><a href="http://vih.dk/fotogalleri">1 &#229;rs h&#248;jdepunkter</a></li>
                    <li><a href="http://vih.dk/fag">Linjer og specialer</a></li>
                    <li><a href="http://vih.dk/langekurser">Lange kurser</a></li>
                    <li><a href="http://vih.dk/kortekurser">Korte&nbsp;kurser</a></li>
                    <li><a href="http://vih.dk/underviser">L&#230;rerkr&#230;fter</a></li>
                    <li><a href="http://vih.dk/info">Info og filosofi</a></li>
                    <li><a href="http://vih.dk/bestilling">Bestilling</a></li>
                </ul>
            </div>
        </div>
        <div id="ft">
            <div class="yui-ge">
                <div class="yui-u first">
                    <ul id="navigation-sites">
                        <li id="elevforeningen"><a href="http://vih.dk/elevforeningen">Elevforeningen</a></li>
                        <li id="efterskolen"><a href="http://vih.dk/efterskole">Efterskolen</a></li>
                        <li id="kursuscenteret"><a href="http://vih.dk/kursuscenter">Kursuscenter</a></li>
                    </ul>
                </div>
                <div class="yui-u" style="text-align:right;"> Vejle Idr&#230;tsh&#248;jskole<br>
                    &#216;rnebjergvej 28<br>
                    7100 Vejle<br>
                    Telefon: 7582 0811 </div>
            </div>
        </div>
        <div id="prop"></div>
    </div>
    </body>
    </html>
    I haven't addressed the issues of the red columns because I dislike the PIE method you are using because it is far too buggy for real use. You should simply use a repeating image on the main container to get your columns. You have a fixed width and therefore you just make an image slice with both column colors on the image at either side. Then just repeat it on your main container (#bd i think). This is the simplest and safest way to equalise columns.

    I also addressed some width issues and some overlapping issues with IE so you will have to crawl carefully through the changes I made.

    I must say that the use of the yui grids makes debugging so much harder and I can't really see any good reason for using frameworks like this as you are swapping ons set of rules for another. CSS is a framework of its own and doesn't need a helping hand especially when it seems to make things harder.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, man. I am reviewing your changes right no. I have to agree with yui grids. It seemed really clever to begin with, but now, I am having trouble removing it again. The css has gotten to complicated, and the html does not really show what the different sections represent.

    I will try to apply your changes , and then try to clean everything up a bit. Any suggestions as what to do with the non-validating hacks for ie?

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "I haven't addressed the issues of the red columns because I dislike the PIE method you are using because it is far too buggy for real use. You should simply use a repeating image on the main container to get your columns. You have a fixed width and therefore you just make an image slice with both column colors on the image at either side. Then just repeat it on your main container (#bd i think). This is the simplest and safest way to equalise columns."

    Would you apply extra markup to create the rounded corner then?

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried browsershots.org to preview your solution in IE5.5, and it seems as if there is some problems (not that you created, but they still persist on your solution) The main content is very narrow. What is it that ie5.5 does not understand (and is it still necessary to design for 5.5)?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    What is it that ie5.5 does not understand (and is it still necessary to design for 5.5)?
    The issues for ie5.5 will probably just be broken box model issues and as you hadn't catered for them originally I guessed you weren't supporting ie5.5 anyway. The fixes should be easy and will just be supplying ie5.5. with the correct dimensions that include padding and borders where applied at the same time as a dimension has been applied.

    I usually do the box model fixes for ie5.5. because its easy to do but I wouldn't spend ages on getting it pixel perfect. See the faq on the broken box model for the correct way to address this issue.

    Would you apply extra markup to create the rounded corner then?
    Which rounded corner are we talking about?

    Usually I try to use existing elements but some times there is no option but to use extra mark up. Regarding the PIE method I was talking about the padding and negative margin technique that is very buggy. It means you can't have in page links in those columns and is quite difficult to get to work cross browser also. That's why I just prefer using a repeating image for columns instead.

    Any suggestions as what to do with the non-validating hacks for ie?
    Yes put them into a conditional comment file for ie6 and under only and they will be hidden form the validator. It's a bit of a cheat but keeps the client happy although in reality it makes no difference.

    I only left them in place in the original because it made it easier for you to see how it works.

    Hope that's covered the points you raised.

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The fixes should be easy and will just be supplying ie5.5. with the correct dimensions that include padding and borders where applied at the same time as a dimension has been applied.
    I will probably try to apply the box model for my design.

    Quote Originally Posted by Paul O'B View Post
    Which rounded corner are we talking about?
    I agree that the PIE method is not perfect for the two red bars. However, if I want to use a repeating image to create the red color, and have a rounded corner at the top left corner and a rounded corner at the bottom right corner, I would need to create some extra markup, right? Or do you have a method, I could apply?

    By the way, I agree with that yui made it more difficult to debug, so I removed it all. I am not completely satisfied with the current html markup, and I am still having some problems with the footer.

    1) I need to make it rather foolproof so it is also three columns which aligns with the #bd.

    2) There is to much whitespace underneath the content, when the rounded corner is set. I would like to decrease this some...

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I would need to create some extra markup, right? Or do you have a method, I could apply?
    Yes you will need some divs for the rounded corners if you can't utilise existing elements. The PIE method usually involves an extra wrapper anyway because you have to hide the overflow somehow. In a fixed with layout I would always go for the background image approach but its your choice because its your site

    1) For three columns the answer is still the same.

    e.g. something like this:
    http://www.pmob.co.uk/search-this/popup-fade2.htm#link1

    Which uses this image for all 3 columns.

    2) For the footer you could try a negative margin on the wrapper and then adjust the z-index order.

    Code:
    .i2 {
        margin: 0 16px -50px 0;
        padding:0 17px 0 0;
        background:url(http://vih.dk/gfx/container/borders.png) repeat-y 100&#37; 0;
    
    }
    #ft-main{position:relative;z-index:999}
    Something like that

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    2) For the footer you could try a negative margin on the wrapper and then adjust the z-index order.
    This creates some problems in the bottom right corner. The problems are most easily viewed here:

    http://vih.dk/info

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hmm, That didn't notice when it was on the green background.

    Try reversing it like this.

    Code:
    /* Right border */
    .i2 {
        margin: 0 16px 0 0;
        padding:0 17px 0 0;
        background:url(http://vih.dk/gfx/container/borders.png) repeat-y 100&#37; 0;
    }
    
    #ft-main{
        position:relative;
        z-index:999;
    margin-bottom:-50px;
    float:left;
    }
    The negative bottom margin is applied to the last element instead but it needs to be floated for it to take effect.

    If that doesn't work you may have to re-slice the image so that the base is smaller and the round corner separated from the base and moved into position on its own.

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Could you give me some more pointers as how to reslice the image. The solution on applying the margin on the latter element is not good, as the white is to short to contain all the content (the footer).

    Using browsershots.org it seems that the solution works well in ie less than seven when javascript is applied, but on one of my local test machines it is terrible It still fires the javascript, and it is as if it will not correctly go without a background.

    I am sorry to bother you again, but I cannot seem to get my head around this issue. Maybe the whole approach I have taken is wrong?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The ie6 problem is nothing to do with the negative margin technique (which seems to be working well in other browsers) but is the issue I already documented in previous posts. I believe I also gave you a solution for this that was working in ie6 but without the side or bottom image (in post#4).

    If you want it to work in ie6 then you can't use this image for the base (or for the right side):

    http://vih.dk/gfx/container/box.png

    You will have to make an image of the exact size for that footer segment and place it an element that fits exactly. The problem is that as I mentioned before the alpha image loader doesn't allow you to place images at any position and it will scale the image to fit the element. It can crop the image but it would crop it from the top which is no good. You need to construct an image that fits that bottom section exactly and then you can safely use it with the alpha image loader.

    For the right side shadow you should just make a straight shadow without the curve at the end and then it can be scaled along with the page. Make the image about the normal page length so that it doesn't need to get scaled too far or it will fade as it gets stretched.

    Alternatively don't bother with IE6 at all and let it have the layout without some of the shadows (as shown in post4).

    The choice is yours

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok, This is how I would go about it and it looks the same in IE6 as in other browsers.

    I've only done this quickly so the dimensions aren't exact but it should show you how to get this thing working.

    http://www.pmob.co.uk/temp/iso.htm

    The bottom round corner is a problem and this is about the best you can do for the gap. It just uses some relative positioning to move the footer text downwards and overlap a bit.

    That soccerfield background image is way too big and I would never use an image that size.

    Hope it helps.

  16. #16
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I must say Paul I raise my glass and say cheers! Your a great help to this community

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by NathanielB
    Your a great help to this community
    Cheers

  18. #18
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I will review it as soon as I am back to work.

    Quote Originally Posted by Paul O'B View Post
    That soccerfield background image is way too big and I would never use an image that size.
    I know. Not exactly my choise. I just have to implement a design, and I cannot quite figure out how to make pictures I use on http://vih.dk repeating. That would be much better, I agree...

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    and I cannot quite figure out how to make pictures I use on http://vih.dk repeating.
    That image is 286k and I would even wince at using a 28k image in the background.

    As most of the image is covered up by content anyway I would use a repeating slice anyway. Copy a section about 200px (or as wide as you can get way with without it looking too bad) wide and then copy it and flip it horizontal so that it makes a seamless join. The resulting image should be a a third of the size of yours without too much loss of effect.

  20. #20
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still struggling

    Hi,

    I am still struggling. Your solution is brilliant, however, I am having trouble implementing the whole thing using your solution as a base.

    http://vih.dk/new/

    When creating three columns in the footer which should follow the columns in the content, I am getting way to much margin in the bottom. Also I need the red to be rounded like this:

    http://vih.dk/new/images/design.jpg

    I could really use a few pointers as how to achieve this... Trying to learn.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Sorry for the late reply but I've been away for a few days.

    You are always going to find it hard to overlay the bottom corner and not mess everything else up. In my example I just used some relative positioning to give you some overlap.

    You8 could absolutely place the content within the footer but this would rely on your footer being the same size at all times and wouldn't cope with dynamic content.

    Something like this:

    Code:
    #footer{
        clear:both;
        width:1023px;
        position:relative;
        z-index:99;
            height:50px;
            top:20px;
    
    }
    #foot-inner{
        position:absolute;
        left:0;
        top:0;
    }
    Code:
            <div id="footer" class="clearfix">
                <div id="foot-inner">
                    <ul id="navigation-sites">
                        <li id="elevforeningen"><a href="http://vih.dk/elevforeningen">Elevforeningen</a></li>
                        <li id="efterskolen"><a href="http://vih.dk/efterskole">Efterskolen</a></li>
                        <li id="kursuscenteret"><a href="http://vih.dk/kursuscenter">Kursuscenter</a></li>
                    </ul>
                    <p id="breadcrumb"> Du er her: <a href="http://localhost/vih/hojskole/src/vih.dk/">forside</a> / En h&#248;jskole for livet </p>
                    <div id="address"> &#216;rnebjergvej 28<br>
                        7100 Vejle<br>
                        Telefon: 7582 0811<br>
                        <a href="">E-mail</a> </div>
                </div>
            </div>
        </div>
        <div id="base"></div>
    </div>
    </body>
    </html>
    You may also need to adjust this on each page if the content varies too much.

    To get the rounded corner at the bottom of the right column you would need to place it there from an element that sits below that section. For example you could place an absolute element from within the footer and then place it upwards with an exact negative top position or margin.

    You can only get to the bottom of those column via an element that sits underneath because the columns have no intrinsic height as they are background images on the section wrapper. Just use the footer which is always below and then drag the corner up into position by using absolute positioning. You would then just need to adjust the z-indexes on the right column so that the text sits on top of the round corner.

    Hope that helps.


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
  •