Hello. I have some strange behavior with the browser chopping off text above my top menu, and I’m not sure what is going on.
Specifically, the top of the company name is getting chopped off, and the menuLinks are acting strangely as well.
I have looked in Firefox’s Developer Tools, but I don’t see any styles that would be causing what appears to be a negative margin.
If I uncheck the following, then the company name scoots down, and the space between the bottom of the company name and the menu bar shrinks. (Also doing this causes the menuLinks to move upwards a bit.)
What is going on here?
Below is my code…
<!DOCTYPE HTML>
<html lang="en">
<!-- ************************* HTML HEAD ********************************* -->
<head>
<!-- METADATA -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<!-- TITLE -->
<title></title>
<!-- CSS STYLES -->
<style media="screen">
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
line-height: 1.4em;
font-size: 0.9em;
}
#pageWrapper{
position: relative;
display: block;
min-height: 100%;
max-width: 1200px;
min-width: 840px;
margin: 0 auto;
}
#pageInner{
position: relative;
width: 100%;
overflow: hidden;
}
#pageHeader{
position: relative;
top: 0;
max-width: 100%;
}
#logo{
position: relative;
float: left;
height: 1em;
width: 5em;
}
#menuLinks{
position: relative;
float: left;
}
#topMenu{
width: 1200px;
clear: both;
min-height: 0;
list-style: none;
background-color: #48D1CC;
}
#topMenu:after{
content: "";
clear: both;
display: block;
height: 0;
}
/**/
#topMenu li.menuCurrent{
background-color: #008B8B; /* Dark Cyan */
}
#topMenu li{
position: relative;
float: left;
padding: 0.5em 1em;
background-color: #48D1CC; /* Medium Turquoise */
}
#pageBody{
position: relative;
max-width: 100%;
margin: 30px 0 0 0;
background-color: #EEE;
}
</style>
</head>
<!-- ************************* HTML BODY ********************************* -->
<body>
<div id="pageWrapper">
<div id="pageInner">
<div id="pageHeader">
<h1 id="logo">ACME</h1><div id="menuLinks">Some text here...</div>
<ul id="topMenu">
<li class="menuCurrent">Home</li>
<li>News</li>
<li>Articles</li>
<li>How-To</li>
<li>Gallery</li>
</ul>
</div>
<div id="pageBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>
<p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>
<p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
<p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>
<p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>
<p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>
</div>
</div>
</div>
</body>
</html>
