SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: IE bugs.

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE bugs.

    Hello.

    Take a look at the attachment firefox.jpg. This is my webpage - everything behaves as I expected. Now open ie.jpg.

    1.
    The div ccase_extra is placed outside the rightbox div. Why does it do that in IE? I would like to place the red "extra" image (blue border div) over the IBM picture. This is really strange. Hope that anyone can help.

    2.
    Why does the grey1 image get shorter in IE. You can see there is a white space under the image. (div with red border)

    Best regards.
    Asbjørn Morell.


    PHP Code:
    <!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>
    <
    title>CakePHP Ccases</title>
    <
    link rel="icon" href="/cake/inmedia/favicon.ico" type="image/x-icon" />
    <
    link rel="shortcut icon" href="/cake/inmedia/favicon.ico" type="image/x-icon" />
    <
    link rel="stylesheet" type="text/css" href="/cake/inmedia/css/inmedia.css" /></head>
    <
    body>

        <
    div id="container">
            <
    div id="header">
                <
    div id="logo"></div>
                <
    div id="grey1"></div>

                <
    div id="menu">
                    <
    a id="homenav" href="/cake/inmedia/pages/home">FORSIDE</a><div id="menuborder"></div>
                    <
    a id="about_usnav" href="/cake/inmedia/pages/about_us">OM OS</a><div id="menuborder"></div>
                    <
    a id="skillsnav" href="/cake/inmedia/pages/skills">DET KAN VI</a><div id="menuborder"></div>
                    <
    a id="casesnav" href="/cake/inmedia/ccases/view">CASES</a><div id="menuborder"></div>
                    <
    a id="contactnav" href="/cake/inmedia/pages/contact">KONTAKT</a><div id="menuborder"></div>

                    <
    div class="floatright"><a id="playgroundnav" href="/cake/inmedia/pages/home">PLAYGROUND</a></div>
                </
    div>
                <
    div id="grey2"></div>
                <
    div id="flash"></div>
            </
    div>
            <
    div id="content">
                <
    body id="cases">

    <
    div id="rightbox">

      <
    div class="headline">REKLAME.</div>
      <
    div class="box">
        
        <
    div id="ccase_extra">
        <
    a href="http://www.ibm.com"><img src="/cake/inmedia/img/Ekstra.gif" /></a>
        </
    div>
        <
    img src="/cake/inmedia/files/download/18"/>  </div>
    </
    div>


    <
    div id="leftmenu">
      <
    div class="headline">NYHEDER.</div>
      <
    div class="box">

        <
    p><a href="/cake/inmedia/ccases/view/3" >IBM</a></p>
        <
    p><a href="/cake/inmedia/ccases/view/2" >ILLUX</a></p>  </div>
    </
    div>


    <
    div id="leftbox">
      <
    div class="headline">CASES.</div>
      <
    div class="box">
        <
    p>IBM</p>
        <
    p>Det er en ny m&aring;de at drive forretning p&aring; - hurtigeremere effektivt og med fokus p&aringde aktiviteterder skaber v&aelig;rdiOn demand-virksomheder er gearet til forandringde kan opfatte og reagere p&aring; &aelig;ndringer i markedetundg&aringfaldgruber og gribe de mulighederder viser siguden at s&aelig;nke tempoet eller spilde kr&aelig;fter p&aringuv&aelig;sentlige ting.</p>

        <
    p>2006-09-06 21:14:40</p>
      </
    div>
    </
    div>        </div>
            <
    div id="footer">
            
    InMedia Reklamebureau i Århus Funch Thomsensgade 101. th 8200 Århus N Tlf2425 7995 mail@inmedia.dk
            
    </div>
        </
    div>

    </
    body>
    </
    html

    PHP Code:
    /* General Layout */

    *
    {
    list-
    stylenone;
    text-decorationnone;
    margin0;
    padding0;
    font-familyverdana;
    font-size8pt;
    color#5e5e5e;
    }

    bodyhtml#container
    {
    height100%;
    border:none;
    }

    body
    {
    background-imageurl('/cake/inmedia/img/bg.gif');
    }

    #container
    {
    display:table;
    background-imageurl('/cake/inmedia/img/baggrund.jpg');
    width:700px;
    margin:0px auto;
    border-right1px solid #C7C8C4;
    border-left1px solid #C7C8C4;
    }

    /* Header Stuff */
    #header
    {
    height270px;
    padding0;
    }

    #logo
    {
    height65px;
    background-imageurl('/cake/inmedia/img/logo.gif');
    background-repeatno-repeat;
    margin3px 0 0 9px;
    }

    #menu
    {
    height31px;
    backgroundtransparent url('/cake/inmedia/img/header_menu.jpg'repeat-x;
    }

    #menu a
    {
    background:url('/cake/inmedia/img/header_menu.jpg'repeat-x;
    padding7px 18px 7px 18px;
    height17px;
    colorwhite;
    floatleft;
    }

    body#home a#homenav,
    body#about_us a#about_usnav,
    body#skills a#skillsnav,
    body#cases a#casesnav
    {
    background:url('/cake/inmedia/img/header_menu_active.jpg'repeat-x;
    }

    #menuborder
    {
    floatleft;
    width2px;
    height31px;
    background:url('/cake/inmedia/img/header_menu_border.jpg'no-repeat;
    }

    #grey1
    {
    height9px;
    background-imageurl('/cake/inmedia/img/grey1.jpg');
    background-repeatno-repeat;
    border1px red solid;
    }

    #flash
    {
    height148px;
    background-imageurl('/cake/inmedia/img/flash.jpg');
    background-repeatno-repeat;
    border1px solid #C7C8C4;
    margin5px;
    }

    #grey2
    {
    height10px;
    background-imageurl('/cake/inmedia/img/grey2.jpg');
    background-repeatno-repeat;
    }

    /* Content Stuff */
    #content
    {
    padding0 5px 0 5px;
    positionrelative;
    }

    #leftmenu
    {
    width260px;
    floatleft;
    }

    #leftbox
    {
    width260px;
    floatleft;
    }

    #rightbox
    {
    width410px;
    floatright;
    }

    #rightbox img
    {
    width380px;
    }

    #content img
    {
    border0;
    }

    #ccase_extra img
    {
    width128px;
    height129px;
    positionabsolute;
    right0/* -9 */
    top0/* 42 */
    border1px solid blue;

    }

    .
    admin
    {
    colorred;
    display:block;
    padding0 15px 15px 15px;
    }

    .
    headline
    {
    padding0 0 0 20px;
    margin20px 0 5px 0;
    background-color#C7C8C4;
    colorwhite;
    font-size10pt;
    text-indent14px;
    }

    .
    box
    {
    background-colorwhite;
    border1px solid #C7C8C4;
    }

    .
    box
    {
    padding15px 0 0 0;
    }

    .
    box pimg
    {
    padding0 15px 15px 15px;
    }

    .
    box h3
    {
    padding0 15px 0px 15px;
    }

    .
    floatright
    {
    floatright;
    }

    /* Footer Stuff */
    #footer
    {
    text-aligncenter;
    width688px;
    margin:0px auto;
    padding5px;
    clear:both;
    positionrelative;
    bottom0/* 42 */

    Attached Images Attached Images

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

    Bug 1 is ie's layout bug (see faq on haslayout) and when a container that holds a lot of positioned or floated elements doesn't have layout it dosan't know how big it is or where its boundaries are. You need to force layout to make it behave and respect its boundaries.

    Bug 2 is the fact that ie won't render your 9px height because it is less than the current font-size. You need to either reduce the font size to zero on that element or use overflow:hidden.

    Code:
    #content
    {
    padding: 0 5px 0 5px;
    position: relative;
    }
    /* mac hide \*/
    * html #content{height:1%}
    /* end hide */
    
    
    #grey1
    {
    height: 9px;
    background-image: url('/cake/inmedia/img/grey1.jpg');
    background-repeat: no-repeat;
    border: 1px red solid;
    overflow:hidden;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B:
    Very impressive! I have pulled out my hair the last to days, because I could not figure out what was going. Actually I was just looking at your tutorial (css layout) 100.000 views is pretty good
    While we are at it I hope that you don't mind if I ask another question:
    In firefox my footer allways displays at the bottom of the page, but in IE it wraps up to the closest div? Can that also be fixed? See attachments. IE_footer.jpeg and Firefox_footer.jpeg.

    Best regards.
    Asbjørn Morell.
    Attached Images Attached Images

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

    Do you have a link as I can't really see whats going on from the code above as it looks much the same in ie and firefox.

    You don't seem to have any special code for the footer anyway although you have added bottom:0 to it but that won't do anything as the element is relatively positioned and you are just telling it to move the bottom edge by 0 pixels. Which basically means stay wherever you are.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B.
    Sorry but I can't put the site only yet. Well if I don't put anything in the content div, the footer wraps up in the middle of the page. I would like the force to stay in at the bottom.

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

    well if you mean like in my examples then you would need to place the footer outside of #container and then drag it up into view.

    This means you would then need to add some padding to the bottom of the content div and make sure the floats are cleared.

    Something like tis although you may want to use the clearfix method (see faq on floats) to clear the floats instead of overflow:hidden.

    Code:
    #content
    {
    padding: 0 5px 25px 5px;
    position: relative;
    overflow:hidden
    }
    #footer
    {
    text-align: center;
    width: 688px;
    margin:0px auto;
    padding: 5px;
    clear:both;
    width:700px;
    margin:-20px auto;
    
    }
    Code:
    				<p>2006-09-06 21:14:40</p>
    			</div>
    		</div>
    	</div>
    </div>
    <div id="footer"> InMedia Reklamebureau i Århus - Funch Thomsensgade 10, 1. th - 8200 Århus N - Tlf. 2425 7995 - mail@inmedia.dk </div>
    </body>
    </html>

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is giving me some trouble.. I tried to use the clearfix, but maybe I am doing it wrong. You can see the result in the attachements.

    Best regards.
    Asbjørn Morell.

    PHP Code:
    <!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>
    <
    title>CakePHP Pages</title>
    <
    link rel="icon" href="/cake/inmedia/favicon.ico" type="image/x-icon" />
    <
    link rel="shortcut icon" href="/cake/inmedia/favicon.ico" type="image/x-icon" />
    <
    link rel="stylesheet" type="text/css" href="/cake/inmedia/css/inmedia.css" /></head>
    <
    body>
        <
    div id="container">
            <
    div id="header">
                        <
    div id="logo"></div>
                <
    div id="grey1"></div>

                <
    div id="menu">
                    <
    a id="homenav" href="/cake/inmedia/pages/home">FORSIDE</a><div id="menuborder"></div>
                    <
    a id="about_usnav" href="/cake/inmedia/pages/about_us">OM OS</a><div id="menuborder"></div>
                    <
    a id="skillsnav" href="/cake/inmedia/pages/skills">DET KAN VI</a><div id="menuborder"></div>
                    <
    a id="casesnav" href="/cake/inmedia/ccases/view">CASES</a><div id="menuborder"></div>
                    <
    a id="contactnav" href="/cake/inmedia/pages/contact">KONTAKT</a><div id="menuborder"></div>

                    <
    div class="floatright"><a id="playgroundnav" href="/cake/inmedia/pages/home">PLAYGROUND</a></div>
                </
    div>
                <
    div id="grey2"></div>
                <
    div id="flash"></div>
            </
    div>
            <
    div id="content">
                <
    body id="home">


    <
    div id="rightbox">
      <
    div class="headline">REKLAME.</div>
      <
    div class="box">
    <
    p>Media - <br />
    Dit reklamebureau L&aelig;n dig bare tilbage og lad os klare din markedsf&oslash;ring..  InMedia er et mindre reklamebureau med f&oslash;dderne solidt plantet i den jyske muldDet har givet os n&aelig;ring tilat udvikle kreativ kommunikation med et godt &oslash;je for grafisk design og l&oslash;sninger der virker &ndashvi mister nemlig ikke jordforbindelsenEngagementeffektivitet og professionel stolthed ligger dybt i os &ndashkort sagt vi er kompetente og til at stole p&aring;.   Mindre reklamebureau mindre priser Det beh&oslash;ver ikke at koste en formue..  Det kan v&aelig;re dyrt at benytte et reklamebureau &ndashhos os er prisen overkommelig for alleVi er et team af unge mennesker der br&aelig;nder for det vi laver s&aringher arbejder vi ikke efter klokkenmen bliver ved til vi er tilfredse og deadline er overholdtHos os hedder detFast pris og fast leveringstid &ndashbasta.  InMedia er ikke noget stort reklamebureaus&aringdu kommer ikke til at betale for store bilerhusleje p&aringstr&oslash;get og h&oslash;je direkt&oslash;rl&oslash;nninger hos os &ndashvi koncentrerer os nemlig om at levere h&oslash;j kvalitet til lav pris.  Det koster ikke noget at sp&oslash;rge men det betaler sigKontakt os og vi vender tilbage inden for 24 timer</p>  </div>

    </
    div>


    <
    div id="leftmenu">
      <
    div class="headline">NYHEDER.</div>
      <
    div class="box">
    <
    a href="news/ 15 ">
        <
    h3>2006-09-15 16:57:13</h3>
        <
    p>&Aring;RHUS UNIVERSITET Tidsskrift for Kunsthistorisk Afdeling  InMedia Reklamebureau har ...</a></p><a href="news/ 13 ">
        <
    h3>2006-09-12 19:38:11</h3>

        <
    p>Som du m&aring;ske har <strong>bem&aelig;rket </strong>har vi f&aring;et nyt ansigt i form af ny ...</a></p>  </div>
    </
    div>


    <
    div id="leftbox">
      <
    div class="headline">CASES.</div>
      <
    div class="box">

                <
    img src="/cake/inmedia/files/download/18"/>
                

    <
    h3>IBM</h3>
    <
    p>Det er en ny m&aring;de at drive forretning p&aring; - hurtigeremere effektivt og med fokus p&aringde aktiviteterder skaber v&aelig;rdiOn demand-virksomheder er gearet til forandringde kan opfatte og reagere p&aring; &aelig;ndringer i markedetundg&aringfaldgruber og gribe de mulighederder viser siguden at s&aelig;nke tempoet eller spilde kr&aelig;fter p&aringuv&aelig;sentlige ting.</p>

    <
    p>2006-09-06 21:14:40</p>

      </
    div>
    </
    div>        </div>
    </
    div>

    <
    div id="outer" class="clearfix">
        <
    div id="footer">
        
    InMedia Reklamebureau i Århus Funch Thomsensgade 101. th 8200 Århus N Tlf2425 7995 mail@inmedia.dk
        
    </div>
    </
    div>

    </
    body>
    </
    html


    PHP Code:
    /* General Layout */

    *
    {
    list-
    stylenone;
    text-decorationnone;
    margin0;
    padding0;
    font-familyverdana;
    font-size8pt;
    color#5e5e5e;
    }

    bodyhtml#container
    {
    height100%;
    border:none;
    }

    body
    {
    background-imageurl('/cake/inmedia/img/bg.gif');
    }

    #container
    {
    display:table;
    background-imageurl('/cake/inmedia/img/baggrund.jpg');
    width:700px;
    margin:0px auto;
    border-right1px solid #C7C8C4;
    border-left1px solid #C7C8C4;
    }

    /* Header Stuff */
    #header
    {
    height270px;
    padding0;
    }

    #logout
    {
    floatright;
    right0;
    margin5px;
    colorred;
    }

    #logo
    {
    height65px;
    background-imageurl('/cake/inmedia/img/logo.gif');
    background-repeatno-repeat;
    margin3px 0 0 9px;
    }

    #menu
    {
    height31px;
    backgroundtransparent url('/cake/inmedia/img/header_menu.jpg'repeat-x;
    }

    #menu a
    {
    background:url('/cake/inmedia/img/header_menu.jpg'repeat-x;
    padding7px 18px 7px 18px;
    height17px;
    colorwhite;
    floatleft;
    }

    body#home a#homenav,
    body#about_us a#about_usnav,
    body#skills a#skillsnav,
    body#cases a#casesnav
    {
    background:url('/cake/inmedia/img/header_menu_active.jpg'repeat-x;
    }

    #menuborder
    {
    floatleft;
    width2px;
    height31px;
    background:url('/cake/inmedia/img/header_menu_border.jpg'no-repeat;
    }

    #grey1
    {
    height9px;
    background-imageurl('/cake/inmedia/img/grey1.jpg');
    background-repeatno-repeat;
    overflow:hidden;
    }

    #flash
    {
    height148px;
    background-imageurl('/cake/inmedia/img/flash.jpg');
    background-repeatno-repeat;
    border1px solid #C7C8C4;
    margin5px;
    }

    #grey2
    {
    height10px;
    background-imageurl('/cake/inmedia/img/grey2.jpg');
    background-repeatno-repeat;
    }

    /* Content Stuff */
    #content
    {
    padding0 5px 25px 5px;
    positionrelative;
    }
    /* mac hide \*/
    html #content{height:1%}
    /* end hide */

    #leftmenu
    {
    width260px;
    floatleft;
    }

    #leftbox
    {
    width260px;
    floatleft;
    clearleft;
    }

    #rightbox
    {
    width410px;
    floatright;
    }

    #rightbox img
    {
    width380px;
    }

    #content img
    {
    border0;
    }

    #ccase_extra img
    {
    width128px;
    height129px;
    positionabsolute;
    right: -9px;
    top42px;
    }

    .
    admin
    {
    colorred;
    display:block;
    padding0 15px 15px 15px;
    }

    .
    headline
    {
    padding0 0 0 20px;
    margin20px 0 5px 0;
    background-color#C7C8C4;
    colorwhite;
    font-size10pt;
    text-indent14px;
    }

    .
    box
    {
    background-colorwhite;
    border1px solid #C7C8C4;
    }

    .
    box
    {
    padding15px 0 0 0;
    }

    .
    box pimg
    {
    padding0 15px 15px 15px;
    }

    .
    box h3
    {
    padding0 15px 0px 15px;
    }

    .
    floatright
    {
    floatright;
    }

    /* Footer Stuff */
    #footer
    {
    text-aligncenter;
    width688px;
    margin:0px auto;
    padding5px;
    clear:both;
    width:700px;
    margin:-20px auto;
    }

    .
    clearfix:after {
        
    content:".";
        
    display:block;
        
    height:0;
        
    clear:both;
        
    visibility:hidden;
    }
    .
    clearfix {
        
    display:inline-block;
    }
    /* mac hide \*/
        
    html .clearfix {height1%;}
         .
    clearfix {displayblock;}
    /* End hide */ 
    Attached Images Attached Images

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

    You have some bottom padding on the footer so we need to move the footer up another 5px

    Code:
    #footer
    {
    text-align: center;
    width: 688px;
    margin:0px auto;
    padding: 5px;
    clear:both;
    width:700px;
    margin:-25px auto 0;
    }
    That should correct the scrollbar.


    Your clearing the wrong element with the clearfix You should be clearing the content div.

    Apply the clearfix here and it will contain the nested floats. This will allow the 25px padding on the bottom of the content to protect the footer form hitting the content above.

    Code:
    		<div id="grey2"></div>
    		<div id="flash"></div>
    	</div>
    	<div id="content" class="clearfix">
    		<!--<body id="home">-->
    		<div id="rightbox">
    			<div class="headline">REKLAME.</div>
    That should do it

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    BTW you have some errors in the html so validate your code.


    You have an erroneous body tag here!!
    Code:
     	</div>
     	<div id="content" class="clearfix">
         <body id="home">
     		<div id="rightbox">
     			<div class="headline">REKLAME.</div>
    Get rid of that

    Also in your left menu you have an invalid structure whre you have nested heading tags inside anchors which is not allowed.

    Code:
     		<div id="leftmenu">
     			<div class="headline">NYHEDER.</div>
     			<div class="box"> <a href="news/ 15 ">
     				<h3>2006-09-15 16:57:13</h3>
     				<p>&Aring;RHUS UNIVERSITET Tidsskrift for Kunsthistorisk Afdeling InMedia Reklamebureau har ...</a></p>
     			    <a href="news/ 13 ">
     				<h3>2006-09-12 19:38:11</h3>
     				<p>Som du m&aring;ske har <strong>bem&aelig;rket </strong>har vi f&aring;et nyt ansigt i form af ny ...</a></p>
     			</div>
    Tags must be properly nested and you can't have any block level elements inside an anchor (e.g. h1,h2,p etc). The anchor needs to be inside those elements so you will either have to use 2 anchors or change those elements to spans and style them with css to look the same.

    Back tomorrow

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works fantastic! It is nice to have guru's like you around
    take care.

    I will take a look at your comments tomorrow. Must go to bed now.

    Best regards.
    Asbjørn Morell.


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
  •