Listed items looks different in browsers

HTML & CSS
1

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:

<!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:

/* 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

Looks the same in Firefox and Chrome to me. You don’t need those <p>s inside each LI though. Quite redundant. :slight_smile:

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

3

I see it happening in Chrome. The parent just needs overflow:hidden to contain the floated <li>'s :).

#meny{overflow:hidden;}
4

How am I going to do instead?

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 :smiley:

5

And I don’t understand why overflow:hidden is given to #meny when the div is wide enough. :confused:

6

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.

7

What does snagging mean, if I know what that means Ill probably get it :smiley: ?

8

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.