SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with display block

    Hi all.

    why this menu bar looks great on FF but really bad on IE?
    http://94.194.226.86/f1/

    what do I do wrong?

    thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    If you will fix your html errors and your css errors your menu will work in IE6/7.

    Code:
    <body>
    <div id="container">
        <div id="header">
            <span><a href="http://www.formula-1.co.il/">Formula-1.co.il</a></span>
    
        </div>
        <div id="menu">
            <a href="http://www.formula-1.co.il/forum/index.php">פורומים</a>
            <a href="http://www.formula-1.co.il/f1forum/index.php">F1 Forums</a>
            <a href="f2009.php">2009</a>
            <a href="links.php">לינקים</a>
            <a href="contact.php">צור קשר</a>
        </div>
    </div>
    </body>
    </html>
    Code:
    .clearfix:after {
    content:"."; 
    display:block;
    height:0;
    clear:both;
    visibility:hidden;<--Missing closing bracket
    
    .clearfix {display:inline-block;}
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    }<--Stray closing bracket

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the html error is because I put a php exit code.
    I've fixed the css error but still the same

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Remove the white space in the html from around the floated anchors because that will cause a new line as the spaces are non floated.

    Code:
        <div id="menu"><a href="http://www.formula-1.co.il/forum/index.php">פורומים</a><a href="http://www.formula-1.co.il/f1forum/index.php">F1 Forums</a><a href="f2009.php">2009</a><a href="links.php">לינקים</a> <a href="contact.php">צור קשר</a></div>
    That should really be in a list structure anyway as bare anchors need to be separated by more than whitespace for accessibility reasons (Screen readers may read the whole list of links as a sentence without pause).

    You are also saving the BOM (&#239;&#187;&#191 at the top of the css file which may corrupt things. Set your editor not to save the BOM.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks! I found the problem. It was the php inculde that insert a break page. I have the same problem on another site. How can I prevent that?

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry but I have another question. Now that I sloved this problem I remove the php exit and all the page is up.

    Sorry for the ???? it is encoding problem - but why all the text under the <entry> div on IE don't keep the width of 560? FF no problem...

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing when you set an element to position:absoltue; you have to set x and y coordinates, for example, on "#column1" you have to set left:0;.

    Also I believe it is going all the way across because on "#contentarea2" that width is 100&#37; (as a block element does, it fills available width)

    You also seem to be using a lot of divs which do nothing to help style/contain the document. Might want to get rid of some .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I remove a lot of code and redesign the css and left only the basic structure but still... IE ignores the width and display it till the far right. Why?

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Is it floated right? If so remove that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no it is not floated to the right

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It works fine for me in IE with actual demo text rather than all the ????? marks for demo text.

    HTML Code:
    <!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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>scialom's site</title>
    
    <style type='text/css'>
    * {margin:0; padding:0;}
    
    body {
    text-align:right;
    background-color:#4D1919;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }
    #container{
    width:800px;
    height:120px;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    height:90px;
    background-image:url(images/headerimgb.gif);
    background-repeat:no-repeat;
    }
    #header span a{
    position:relative;
    top:55px;
    right:55px;
    font:28px Arial;
    color:#F8C700;
    text-decoration:none;
    }
    #header span a:hover{
    background-color:none;
    }
    #menu {
    height:30px;
    margin:0 0 0 0;
    background-image:url(images/menulb.gif);
    background-repeat:no-repeat;
    padding-right:50px;
    }
    #menu a{
    display:inline;
    float:right;
    height:30px;
    padding:0px 10px 0 10px;
    text-decoration:none;
    font-size:14px ;
    color:#993333;
    font-weight:bold;
    line-height: 30px;
    }
    #menu a:hover {
    background-color:#fff8b5;
    text-decoration:none;
    }
    #content{
    width:800px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:20px;
    direction:rtl;
    position:relative;
    background-image:url(images/contenttop.gif);
    background-repeat:no-repeat;
    }
    #left_bar{
    float: left;
    width: 180px;
    margin-top: 20px;
    }
    #right_text{
    width: 560px;
    }
    </style>
    
    
    
    <style type='text/css'>
    /* dj_c title diacritics fix */
    h2 { text-align: right; }
    .post h3 { text-align: right; }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><span><a href="http://www.formula-1.co.il/">Formula-1.co.il</a></span></div>
        <div id="menu">
            <a href="http://www.formula-1.co.il/forum/index.php">פורומים</a><a href="http://www.formula-1.co.il/f1forum/index.php">F1 Forums</a><a href="f2009.php">2009</a><a href="links.php">לינקים</a><a href="contact.php">צור קשר</a>
        </div>
        <div id="content">
            <div id="left_bar">
            </div>
            <div id="right_text">                       
                <p>Lorem ipsum dolor sit amet consectetuer est senectus vitae mattis massa. Congue sollicitudin interdum tristique ac quis Suspendisse porta condimentum pede id. Auctor hac nec tincidunt porttitor urna Vestibulum non wisi ac ut. Libero mi Aenean Ut et Mauris vitae tortor vitae Aenean ut. Tellus id ligula vitae Vestibulum Nunc eget Cras et wisi dignissim. Id condimentum sed purus eros Sed platea molestie libero fringilla est. Adipiscing convallis.</p>
                <p>Dui est tincidunt In Vivamus id sed Sed pede amet Vivamus. Tempus Vestibulum Vivamus et pede adipiscing adipiscing interdum Nulla malesuada lacus. Convallis nec sollicitudin pellentesque nibh ullamcorper neque Sed sit pede adipiscing. Sociis ac augue eros accumsan Nam sed ut urna justo tortor. In Integer condimentum quis hac Ut orci leo Nulla Ut vestibulum. Rutrum ut Sed Vivamus ac lacinia.</p>
                <p><img src="http://www.formula-1.co.il/wp-content/uploads/2009/08/fisi.jpg" alt="fisi" title="fisi" width="275" height="183" class="alignright size-full wp-image-402" /><p>Lorem ipsum dolor sit amet consectetuer est senectus vitae mattis massa. Congue sollicitudin interdum tristique ac quis Suspendisse porta condimentum pede id. Auctor hac nec tincidunt porttitor urna Vestibulum non wisi ac ut. Libero mi Aenean Ut et Mauris vitae tortor vitae Aenean ut. Tellus id ligula vitae Vestibulum Nunc eget Cras et wisi dignissim. Id condimentum sed purus eros Sed platea molestie libero fringilla est. Adipiscing convallis.</p>
                <p>Dui est tincidunt In Vivamus id sed Sed pede amet Vivamus. Tempus Vestibulum Vivamus et pede adipiscing adipiscing interdum Nulla malesuada lacus. Convallis nec sollicitudin pellentesque nibh ullamcorper neque Sed sit pede adipiscing. Sociis ac augue eros accumsan Nam sed ut urna justo tortor. In Integer condimentum quis hac Ut orci leo Nulla Ut vestibulum. Rutrum ut Sed Vivamus ac lacinia.</p>
                <p>Lorem ipsum dolor sit amet consectetuer est senectus vitae mattis massa. Congue sollicitudin interdum tristique ac quis Suspendisse porta condimentum pede id. Auctor hac nec tincidunt porttitor urna Vestibulum non wisi ac ut. Libero mi Aenean Ut et Mauris vitae tortor vitae Aenean ut. Tellus id ligula vitae Vestibulum Nunc eget Cras et wisi dignissim. Id condimentum sed purus eros Sed platea molestie libero fringilla est. Adipiscing convallis.</p>
                <p>Dui est tincidunt In Vivamus id sed Sed pede amet Vivamus. Tempus Vestibulum Vivamus et pede adipiscing adipiscing interdum Nulla malesuada lacus. Convallis nec sollicitudin pellentesque nibh ullamcorper neque Sed sit pede adipiscing. Sociis ac augue eros accumsan Nam sed ut urna justo tortor. In Integer condimentum quis hac Ut orci leo Nulla Ut vestibulum. Rutrum ut Sed Vivamus ac lacinia.</p>
                <p><img src="http://www.formula-1.co.il/wp-content/uploads/2009/08/alon.jpg" alt="alon" title="alon" width="275" height="183" class="alignright size-full wp-image-393" />
                <p>Lorem ipsum dolor sit amet consectetuer est senectus vitae mattis massa. Congue sollicitudin interdum tristique ac quis Suspendisse porta condimentum pede id. Auctor hac nec tincidunt porttitor urna Vestibulum non wisi ac ut. Libero mi Aenean Ut et Mauris vitae tortor vitae Aenean ut. Tellus id ligula vitae Vestibulum Nunc eget Cras et wisi dignissim. Id condimentum sed purus eros Sed platea molestie libero fringilla est. Adipiscing convallis.</p>
                <p>Dui est tincidunt In Vivamus id sed Sed pede amet Vivamus. Tempus Vestibulum Vivamus et pede adipiscing adipiscing interdum Nulla malesuada lacus. Convallis nec sollicitudin pellentesque nibh ullamcorper neque Sed sit pede adipiscing. Sociis ac augue eros accumsan Nam sed ut urna justo tortor. In Integer condimentum quis hac Ut orci leo Nulla Ut vestibulum. Rutrum ut Sed Vivamus ac lacinia.</p>        
                <p><img src="http://www.formula-1.co.il/wp-content/uploads/2009/07/1248886652.jpg" alt="1248886652" title="1248886652" width="275" height="183" class="alignright size-full wp-image-377" /><br />
                <p>Lorem ipsum dolor sit amet consectetuer est senectus vitae mattis massa. Congue sollicitudin interdum tristique ac quis Suspendisse porta condimentum pede id. Auctor hac nec tincidunt porttitor urna Vestibulum non wisi ac ut. Libero mi Aenean Ut et Mauris vitae tortor vitae Aenean ut. Tellus id ligula vitae Vestibulum Nunc eget Cras et wisi dignissim. Id condimentum sed purus eros Sed platea molestie libero fringilla est. Adipiscing convallis.</p>
                <p>Dui est tincidunt In Vivamus id sed Sed pede amet Vivamus. Tempus Vestibulum Vivamus et pede adipiscing adipiscing interdum Nulla malesuada lacus. Convallis nec sollicitudin pellentesque nibh ullamcorper neque Sed sit pede adipiscing. Sociis ac augue eros accumsan Nam sed ut urna justo tortor. In Integer condimentum quis hac Ut orci leo Nulla Ut vestibulum. Rutrum ut Sed Vivamus ac lacinia.</p>
            </div>
        </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks it was the ???


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
  •