SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Listed items looks different in browsers

    Hi.

    As you can see below I have a class called .meny wich is a unorderd list.
    And as you can see in the styles I have made it so they are like a menu.
    When I try in firefox it looks good, but in chrome and internet explorer the many looks wierd. Have a look at http://www.kwpwebdesign.se to see the problem..

    HTML:

    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AirWipp</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/nivoslider/nivostyles.css" rel="stylesheet" type="text/css">
    
    <script src="css/nivoslider/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="css/nivoslider/jquery.nivo.slider.js" type="text/javascript"></script>
    
     <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
     
    
    
    
        
    
    </head>
    
    
    
    <body>
    
    
    
    <div id="bgwrapper">
    <div id="wrapper">
    
    <div id="slogandiv">
    
    <img class="sloganpic" src="images/Slogan.png" width="901" height="96">
    
    </div>
    
    <div id="sliderdiv">
    
    <div id="slider">
         
            <img src="images/Nivoslider/Banner1.png" title="" />
       
           
    </div>
    
    <div id="downslogan"></div>
    
    <div id="meny">
    
    <ul class="meny">
    <li>
      <p>Home</p>
    </li>
    <li>
      <p>Media</p>
    </li>
    <li>
      <p>Services</p>
    </li>
    <li>
      <p>THE TEAM</p>
    </li>
    <li>
      <p>Partners</p>
    </li>
    <li>
      <p>Clients</p>
    </li>
    <li>
      <p>Contact</p>
    </li>
    </ul>
    
    
    
    
    
    </div>
    
    
    </div>
    
    
    </div>
    </div>
    
    
    
    
    </body>
    </html>
    CSS:

    Code:
    /* OTHER */
    
    body {background-image:url(../images/BG.jpg); }
    
    .meny {}
    .meny li { float:left; padding-left:75px; }
    
    p {color:#FFF;}
    
    
    
    /* DIVS */
    
    
    #wrapper {width:950px; height:2000px; margin-left:auto; margin-right:auto; padding-top:1px; }
    
    #bgwrapper {width:1300px; margin: 0 auto 0 auto; background-image:url(../images/WrapperBG.png) }
    
    #slogandiv {margin-top:20px; width:950px;  }
    
    #sliderdiv {width:950px; height:330px; margin-top:10px; }
    
    #meny {width:950px; margin-top:20px; }
    
    #downslogan {height:10px; width:950px; background-image:url(../images/Downslogan.png); margin-top:20px;}
    
    
    
    /* PICS */
    
    .sloganpic {
    	margin-right: auto;
    	margin-left: auto;
    	display:block;
    	
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Eric Meyer Reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    //Kevin

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Looks the same in Firefox and Chrome to me. You don't need those <p>s inside each LI though. Quite redundant.

    Could you take a screen shot of what you are seeing?

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I see it happening in Chrome. The parent just needs overflow:hidden to contain the floated <li>'s .
    Code:
    #meny{overflow:hidden;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    How am I going to do instead?
    Quote Originally Posted by ralph.m View Post
    Looks the same in Firefox and Chrome to me. You don't need those <p>s inside each LI though. Quite redundant.

    Could you take a screen shot of what you are seeing?

    I havent tried it but I guess it will work. Thanks, and i hope I run into the same problem sometime again so I know myself what the problem is
    Quote Originally Posted by RyanReese View Post
    I see it happening in Chrome. The parent just needs overflow:hidden to contain the floated <li>'s .
    Code:
    #meny{overflow:hidden;}

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    And I don't understand why overflow:hidden is given to #meny when the div is wide enough. :/

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    And I don't understand why overflow:hidden is given to #meny when the div is wide enough. :/
    It's not tall enough though .

    Well actually it just needs to clear from the floated elements above it . It's snagging on a float and that's why it looks screwed up. The overflow:hidden on #meny will do this, or you could add clear:both . I chose clear:both to tell you because that will also have the side effect of containing hte floated <li>'s . Two birds with one stone, so to speak.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    267
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    What does snagging mean, if I know what that means Ill probably get it ?

    Quote Originally Posted by RyanReese View Post
    It's not tall enough though .

    Well actually it just needs to clear from the floated elements above it . It's snagging on a float and that's why it looks screwed up. The overflow:hidden on #meny will do this, or you could add clear:both . I chose clear:both to tell you because that will also have the side effect of containing hte floated <li>'s . Two birds with one stone, so to speak.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    What does snagging mean, if I know what that means Ill probably get it ?
    If you float a series of elements to the left but one of the floats in the middle is taller than the others then when the float at the end of the line wraps to a new line it will hit (snag) the tallest float first and not go back to the left edge as you may have expected. You would need to clear the whole row so that a float will return to the left edge of its container.


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
  •