CSS Creator [Solved] Herniated DIV - Nav bar/list popping out to the right... doctor in the house???

Posted: Thu, 2008-07-24 05:26

Hi all,
I've been out of the web des/dev arena for a little over 2 yrs whilst doing architecture stuff and am returning now (a few iterations of the technology later...) with a new project and have a problem with a "herniated div" that is popping out beyond the right-hand limits of the design. All div wrappers are set to 750px width but the nav bar is popping out to the right.

<!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>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
  <meta http-equiv="content-type" content=
  "text/html; charset=us-ascii" />

  <title>ARCES Mission Sample</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
                <!--
body    { 
color: #000; 
font-family: Verdana, Geneva, Arial, 
Helvetica, SunSans-Regular, sans-serif; 
background-color: #fff; 
text-align: center; 
margin: 0; 
padding-top:0; 
margin-top:0; 
}

/*wraps the whole header area */  
#headwrap { 
width: 750px; 
margin: 0 auto; 
text-align: left; 
background: #ffffff; 
position: relative; 
padding-top: 0px;
clear: both;
}

#headzone    { 
color: #030; 
background-color: #9db9b4; 
background-image: url
("http://www.beyondgutenberg.com/sandbox/tester4/art/sampleback.gif"); 
background-repeat: no-repeat; 
background-position: 0 0; 
text-align: left; 
margin: 0; 
width: 100%; 
height: 56px; 
clear: both 
}

p.titlecaptionwhite { 
color: #fff; 
font-size: 1em; 
font-family: 
Verdana, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; 
font-style: oblique; 
font-weight: bold; 
margin-top: 0; 
margin-left: 0.5em; 
padding-top: 24; 
padding-bottom: 0 
}

.backimageLogo { 
background-image: url("art/sampleback.gif"); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: left top; 
visibility: visible; 
position: relative; 
top: 0; 
left: 0; 
width: 160px; 
height: 56px 
}

#navlist
         { 
         margin-top: 0; 
         margin-right: 0; 
         }
                
#navlist ul
  { 
  color: white; 
  font-size: 11px; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-weight: bold; 
  background-color: #5b8079; 
  margin-left: 0; 
  margin-top: 0; 
  width: 100%; 
  float: left 
  }

#navlist ul li  { display: inline }

#navlist ul li a
  { 
  color: white; 
  text-decoration: none; 
  background-color: #5b8079; 
  padding-top: 4px; 
  padding-bottom: 4px; 
  padding-right: 10px; 
  padding-left: 10px; 
  float: left; 
  }

#navlist ul li a:hover
{
background-color: #9999cc;
color: #fff;
}

body#about a#aboutnav, body#events a#eventnav, 
body#comm a#commnav, body#people a#peoplenav, 
body#resource a#resnav, body#member a#membernav, 
body#contact a#connav 
{ 
color: #fff; 
font-weight: bold; 
background-color: #9999cc 
}
-->
/*]]>*/
</style>
  <link href="arces-slate.css" rel="stylesheet" type="text/css"
  media="all" />
</head>

<body id="about">
  <div id="headwrap">
    <div id="headzone">
      <p class="titlecaptionwhite"><span style=
      "position: relative; top: 20px;">Association of the Cerulean
      Entity Strategists &#8212; a work in progress</span></p>
    </div>

    <div id="navlist">
      <ul id="topnav">

        <li id="current"><a href="#" id="aboutnav" title="About"
        name="aboutnav">About</a></li>

        <li><a href="events.html" id="eventnav" title=
        "Conferences and other Events" name=
        "eventnav">Events</a></li>

        <li><a href="comm.html" id="commnav" title=
        "Working Committees" name="commnav">Committees</a></li>

        <li><a href="people.html" id="peoplenav" title="People"
        name="peoplenav">People</a></li>

        <li><a href="resource.html" id="resnav" title=
        "Bibliography and Links" name="resnav">Resources</a></li>

        <li><a href="member.html" id="membernav" title=
        "Become a member" name="membernav">Membership</a></li>

        <li><a href="contact.html" id="connav" title="Contact Us"
        name="connav">Contact</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Am I looking right at it? I've probably stuck in unnecessary stuff that has tripped me up, but I can't find the glitch.

In the sample shown, I've deleted every other item on the page and from the css that isn't related to the problem, moved the css from an external into the page, TIDY'd it, and that darned nav is still blurping out to the right Blushing . The page is at
http://www.beyondgutenberg.com/sandbox/tester4/aboutMissionSample.html

Thanks in advance for any wisdom!

Hugo

Moderator

Posts: 12037
Joined: 2004-06-06
Location: London

You simply have neglected to

Posted: Thu, 2008-07-24 06:08

You simply have neglected to deal with the default padding applied to the ul, some browsers use margin-left others padding-left; you must control both.

Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

garnetweb

newbie

Posts: 6
Joined: 2008-07-24
Location: CA, USA

Herniated div - popping to the right..... cheez, yep! You got it

Posted: Thu, 2008-07-24 07:18

Hugo,
Yep, you got it on the nose -- that's exactly what I did. Blushing I added padding-left: 0; to the UL and all is right in the little world. Thanks much. I didn't realize that there was a default padding involved -- after your answer I went and prowled that one and lo and behold...G

[Solved] Herniated DIV - Nav bar/list popping out to the right... doctor in the house???

You simply have neglected to

Herniated div - popping to the right..... cheez, yep! You got it

Online users