CSS padding problems

Hi
I am building a site for a client that has had the page
designed by a graphic designer and she is being EXCEPTIONALLY picky
about the font size, spacing and many other things. The problem I
have is, that on some browsers, the space between the text and the
border at the top of the container, is double what it is in IE6 and
IE7. Can anyone tell me how I can fix this so that it has the same
amount of spacing in all browsers.
Many thanks
Julie
CSS code:
/* CSS Document */
/*formatting divs*/
body a p td th div blockquote ul ol dl{
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color:#999999;
margin: 0;
body { margin: 0px; padding: 0px; background:#262425}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
a:link {
text-decoration:underline;
color: #000000;
a:visited {color:#666666; text-decoration:underline;}
a:hover {color:#ff9c04; text-decoration:underline;}
/*layout divs*/
#wrapper {width: 820px; position:relative; margin:0 auto;
top:15%}
#header {clear:both; height:50px; width:820px}
#leftcol {
width: 108px;
float:left;
padding-right:12px;
text-align: right;
#container {margin:0; padding:0; float:right; width:695px}
#content {background-color:#FFFFFF; width: 328px; padding: 0
10px 0 10px; height: 500px; float:left; color: #666666; font-size:
14px; overflow: hidden;}
#rightcol {width: 347px; float:right}
#footer {clear: both}
#text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
/*menu*/
#leftcol ul {}
#leftcol li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style:none;
.logo {
margin-right: 0px;
margin-left: 0px;
padding: 23px 0px 12px 0;}
/*design elements*/
.scroll {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #C2A2DA;
scrollbar-highlight-color: #C2A2DA ;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}

Designing for the web is NOT the same as designing for print.
Graphic
designers do not understand that there are too many variables
you can't
control such as screen size, browsers, and the default text
size used by
visitors. Firefox, Opera & Safari will render pages
differently than IE. In
some cases, you can use IE hacks or CSS tricks to get it
closer to what you
want. Or you could make one big graphic or image map but I do
not recommend
this as it will impact your site's search engine rankings
& user
accessibility.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"ukjooles" <[email protected]> wrote in
message
news:[email protected]
> Hi
>
> I am building a site for a client that has had the page
designed by a
graphic
> designer and she is being EXCEPTIONALLY picky about the
font size, spacing
and
> many other things. The problem I have is, that on some
browsers, the
space
> between the text and the border at the top of the
container, is double
what it
> is in IE6 and IE7. Can anyone tell me how I can fix this
so that it has
the
> same amount of spacing in all browsers.
>
> Many thanks
> Julie
>
> CSS code:
>
> /* CSS Document */
>
>
> /*formatting divs*/
>
> body a p td th div blockquote ul ol dl{
> font-family: "Times New Roman", Times, serif;
> font-size: 14px;
> color:#999999;
> margin: 0;
> }
>
> body { margin: 0px; padding: 0px; background:#262425}
>
> h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
>
> a:link {
> text-decoration:underline;
> color: #000000;
> }
> a:visited {color:#666666; text-decoration:underline;}
>
> a:hover {color:#ff9c04; text-decoration:underline;}
>
>
> /*layout divs*/
>
> #wrapper {width: 820px; position:relative; margin:0
auto; top:15%}
>
> #header {clear:both; height:50px; width:820px}
>
> #leftcol {
> width: 108px;
> float:left;
> padding-right:12px;
> text-align: right;
> }
>
> #container {margin:0; padding:0; float:right;
width:695px}
>
> #content {background-color:#FFFFFF; width: 328px;
padding: 0 10px 0 10px;
> height: 500px; float:left; color: #666666; font-size:
14px; overflow:
hidden;}
>
> #rightcol {width: 347px; float:right}
>
> #footer {clear: both}
>
> #text {padding: 0 10px 10px 0; height: 370px;
overflow:auto}
>
>
> /*menu*/
>
> #leftcol ul {}
> #leftcol li {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #FFFFFF;
> list-style:none;
> }
>
> .logo {
> margin-right: 0px;
> margin-left: 0px;
> padding: 23px 0px 12px 0;}
>
>
> /*design elements*/
>
> .scroll {
> scrollbar-face-color: #ffffff;
> scrollbar-shadow-color: #C2A2DA;
> scrollbar-highlight-color: #C2A2DA ;
> scrollbar-3dlight-color: #ffffff;
> scrollbar-darkshadow-color:#ffffff;
> scrollbar-track-color:#FFFFFF;
> scrollbar-arrow-color:#C2A2DA}
>
>

Similar Messages

  • CSS Float Problem

    Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me.  I have checked everything but can't find the problem.  Thanks in advance;
    example of problem here  http://davidbrown.ipower.com/template/template.htm
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Our Jewelry Retail Secrets - Thank You</title>
    <link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .H1_black {color: #000000}
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 25px;
    font-weight: normal;
    color: #000000;
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    .headlinetxt_colour {color: #FF6600}
    .style1 {color: #ff6600}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="wrapperfix">
        <div id="toporange_bg">login</div>
      </div>
       <div id="wrapperfix_top_grey">
        <div id="top_grey_content_wrapper">
          <div id="big_logo"></div>
          <div id="welcome_user">Welcome "username here"</div>
        </div>
      </div>
      </div>
        <div id="main_content">
          <p>
            <!--main body content goes here -->
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
      </div>
        <div id="footer_container">
          <div id="footer">
            <div id="footer_left">Footer Left</div>
            <div id="footer_centre">Footer Centre</div>
          <div id="footer_right">Footer Right</div></div>
        </div>
    </body>
    </html>
    #footer_container {
    background-color: #333333;
    width: 100%;
    top: 0px;
    margin: 0px;
    padding: 0px;
    #footer {
    background-color: #666666;
    min-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    width: 1000px;
    height: 150px;
    overflow: hidden;
    clear: both;
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
    #footer_left {
    float: left;
    width: 33%;
    margin: 0px;
    padding: 0px;
    height: 150px;
    #footer_centre {
    width: 33%;
    height: 150px;
    margin: 0px;
    padding: 0px;
    float: left;
    #footer_right {
    float: left;
    width: 33%;
    height: 150px;
    margin: 0px;
    padding: 0px;

    I still don't see the #footer_left rule in the CSS in the online example at
    http://davidbrown.ipower.com/template/template.htm

  • How can I get Firefox 4 to correctly display CSS padding for a horizontal nav bar (works in most other browsers, incl. earlier FF)?

    I have just coded a horizontal nav bar for a site with CSS rollover effects using a:hover and a: focus effects. There are no images, just HTML and CSS. The layout works beautifully in IE 6 - 8, Safari for Windows, Opera for Windows...and Firefox 3.X but behaves poorly in Firefox 4. I've hardly ever had problems with FF before. :(
    Here's the menu: http://sddlr01.hottubretailer.com/TestNav2.html
    The rollovers extend below the height of the background div and the extra padding on the first and last li tag don't display correctly either. The page passes WebDeveloper toolbar CSS and HTML validation as well.
    This is making me batty! Any help deeply appreciated!
    Thanks.
    All CSS code is in the page for debugging purposes.

    I do not understand what you mean with "the rollover will extend the full width of the background"
    A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
    The helpers at that forum are more knowledgeable about web development issues.<br />
    You need to register at the mozillaZine forum site in order to post at that forum.<br />
    See http://forums.mozillazine.org/viewforum.php?f=25

  • Is this Cf or CSS causing problem?

    I am on the home stretch on this job. I have this one irritating problem and I am not sure if the prob is being caused by a <cfinput> tag or a style sheet
    problem. Maybe someone out there can help identify what's happening. My guess is that it is in the CSS, but pulling my hair out to find it.
    You will have to go to this page: http://www.renobowls.com/leagues/leagueRegSelect.cfm and click on "Individual Reg" button.
    Look at the radio buttons underneath "Step One: Individual Registration"
    I cannot get these suckers to line up in a single line. Here is the code:
    <div class="box2">
    <table>
    <tr>
    <td width="100%">
        Are you a returning Reno Bowls league player?
      </td>
      <td width="50%">
      <strong>NO</strong> <cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no">
      </td>
      <td>
        <strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes">
      </td>
    </tr>
    </table>
    </div>
    Here is the CSS:
    /*box2*/
    .box2{ background:#e8e8e7; width:100%;}
    .box2 .indent-box-1{ padding:35px 0 0 0; }
    Inherited CSS: (going backwards)
    div.container { overflow:hidden; width: 100%}
    then:
    /*box*/
    .box{ background:#fdfdfd; width:100%;}
    .box .border-top {background:url(images/border_top.gif) repeat-x top;}
    .box .border-bottom {background:url(images/border_bottom.gif) repeat-x bottom;}
    .box .border-left {background:url(images/border_left.gif) repeat-y left;}
    .box .border-right {background:url(images/border_right.gif) repeat-y right;}
    .box .corner-top-left {background:url(images/corner_top_left.gif) no-repeat left top;}
    .box .corner-top-right {background:url(images/corner_top_right.gif) no-repeat right top;}
    .box .corner-bottom-left {background:url(images/corner_bottom_left.gif) no-repeat left bottom;}
    .box .corner-bottom-right {background:url(images/corner_bottom_right.gif) no-repeat right bottom; width:100%; }
    .box .indent-box{ padding:35px 35px 17px 35px; }
    then:
    /*T-Reg*/
    #tReg { font-size:0.75em; width:100%; text-align:left;}
    #tReg .indent-main{padding:0 67px 0 67px}
    #tReg .title{ background:url(images/bg_title.gif) repeat-x top; text-align:center}
    #tReg .title h2{ margin-bottom:5px}
    #tReg .img-left{ float:left; margin:0 20px 16px 0}
    #tReg .img-left1{ float:left; margin:0 20px 0 0}
    #tReg .img-indent{ margin:0 0 16px 0}
    #tReg .img-indent1{ margin:0 12px 6px 0}
    #tReg p{ margin:0 0 17px 0}
    #tReg .p{ margin:0}
    #tReg .p1{ margin:0 0 17px 0; width:100%}
    #tReg .p2{ margin:0 0 7px 0}
    #tReg h4{color:#6d6d6d; font-size:1em; }
    #tReg h5{color:#2a88d8; font-size:.916em; text-transform:uppercase; margin-bottom:5px }
    #tReg h2{color:#3b3e40; font-size:1.66em; text-transform:uppercase; margin-bottom:15px; line-height:1.2em }
    #tReg .h2{color:#0f2f55; font-size:1.66em; text-transform:uppercase; margin-bottom:5px }
    #tReg .h2 span{color:#1e5597; text-transform:none; font-weight:normal}
    #tReg .tail{ background:url(images/tail.gif) repeat-x bottom; padding-bottom:17px; margin-bottom:17px}
    #tReg ul{margin:0; padding:0; list-style:none;}
    #tReg ul li{background:url(images/marker.gif) center left no-repeat; background-position:1 1px; margin:0; padding-left:18px; }
    #tReg ul li a{color:#6d6d6d; text-decoration:none ; line-height:2em; font-weight:bold}
    #tReg ul li a:hover { text-decoration:underline; }
    #tReg .indent{padding:28px 0 0 0}
    #tReg .indent-1{padding:0 0 0 128px}
    .txt1{ color:#6d6d6d; font-weight:bold}
    .txt2{ color:#b72723; font-weight:bold}
    finally:
    body {font-size:100%; line-height:1em; background:url(images/bg.gif) repeat-x #03162a; position:relative;}

    try this:
    <div class="box2">
    <table>
    <tr>
      <td width="100%">
        <table style="width:100%">
          <tr> 
            <td><nobr>Are you a returning Reno Bowls league player?</nobr></td>
            <td><strong>NO</strong></td>
            <td><cfinput type="radio" class="fleft" name="priorRBLeague" value="No" checked="no"></td>
            <td><strong>YES</strong><cfinput class="fleft" type="radio" name="priorRBLeague" value="Yes" checked="Yes"></td>
         </tr>
        </table>
      </td>
    </tr>
    </table>
    </div>

  • DW CS3 CSS template problems in EI6

    I'm new to CSS and DW, so I tried starting with DW's new CSS
    layouts. After working on this off and on for about a year, I
    finally got the design to look okay in both FF 2 and IE 7. Wouldn't
    you know my client has IE 6 and the layout breaks in 6. In 6 the
    middle section, including the banner image, float drop down to the
    bottom. If I make the width on #container2 to be 956 pixels instead
    of 950, then 6 lets the middle section float up, but all browsers
    have a background colored gap between the banner images and one or
    more of the sidebar images. I'm ready to pull my hair out!
    Here's the link to the page set to work for IE 7 and FF and
    to break in 6. The entire site, of course, has many more pages but
    this just has the index because I'm experimenting.
    http://www.montanahorsesales.com/shf2/
    and here's the style sheet that has the problem.
    http://www.montanahorsesales.com/shf2/styles/thrColFix.css
    The reason I added the #container2 is to get the cream
    colored background to show in both IE7 and FF. One or the other was
    giving me the dark green background in the main content and the
    other was giving me the cream colored main content background like
    it was supposed to.
    Any suggestions? Is there a quick and easy way to fix this so
    it works in all browsers? Or a hack to fix it for IE 6? I can live
    without it working in any IE before 6, but I need 6 to work.
    In general, it is a mistake to start with DW's included CSS
    layouts? I thought it would be such a smart thing to do but now I'm
    not so sure!

    Cleo3 wrote:
    > Any suggestions? Is there a quick and easy way to fix
    this so it works in all
    > browsers? Or a hack to fix it for IE 6? I can live
    without it working in any
    > IE before 6, but I need 6 to work.
    Hi,
    you could try replacing yours for mine...
    .leftMargin198 {
    margin: 0px;
    padding: 0px;
    height: 175px;
    width: 554px;
    float: left;
    HTH
    chin chin
    Sinclair

  • CSS Float Problems

    I'm just becoming comfortable with using CSS. At least, I
    thought I was. I put together a test page and it worked on IE 7.
    Then, I downloaded Firefox and Safari to check compatability on
    other browsers.
    I have a centered page with a top navigation bar, content
    area, and a footer (bottomNavBar). Inside the content area I have
    two sections, a left section and a right section. In the left there
    should be text, some sort of welcome text. In the right some sort
    of Flash intro video the user can play when they choose.
    The problem: I got the float to work in IE 7 (Sometimes it
    wouldn't. It seems tempermental.). However, the floats won't work
    on the other 2 browsers. In the other 2 it puts the first div
    listed above the second instead of side by side like in IE 7.
    Here is the code:

    To make your contentIndexFlashIntro & contentIndexWelcome
    divs sit
    side-by-side you have to assign each a width. The combined
    total of those
    widths must be <=800px.
    Walt
    "JasonTheAdobeFan" <[email protected]> wrote
    in message
    news:[email protected]
    > I'm just becoming comfortable with using CSS. At least,
    I thought I was. I
    > put
    > together a test page and it worked on IE 7. Then, I
    downloaded Firefox and
    > Safari to check compatability on other browsers.
    >
    > I have a centered page with a top navigation bar,
    content area, and a
    > footer
    > (bottomNavBar). Inside the content area I have two
    sections, a left
    > section and
    > a right section. In the left there should be text, some
    sort of welcome
    > text.
    > In the right some sort of Flash intro video the user can
    play when they
    > choose.
    >
    > The problem: I got the float to work in IE 7 (Sometimes
    it wouldn't. It
    > seems
    > tempermental.). However, the floats won't work on the
    other 2 browsers. In
    > the
    > other 2 it puts the first div listed above the second
    instead of side by
    > side
    > like in IE 7.
    >
    > Here is the code:
    >
    >
    > ***First is the HTML***
    >
    > <body>
    > <div class="header">
    > <img src="Logo001.png" />
    > </div>
    > <div class="container">
    > <div class="topNavBar">
    > <ul class="topNavBarUL">
    > <li class="topNavBarLI"><a
    class="topNavBarLinksCurrent"
    > href="index.htm">Home</a></li>
    > <li class="topNavBarLI"><a
    class="topNavBarLinks"
    > href="page2.htm">Link2</a></li>
    > <li class="topNavBarLI"><a
    class="topNavBarLinks"
    > href="page3.htm">Link3</a></li>
    > <li class="topNavBarLI"><a
    class="topNavBarLinks"
    > href="page4.htm">Link4</a></li>
    > </ul>
    > </div>
    > <div class="content">
    > <div class="contentIndexFlashIntro">
    > <script type="text/javascript">
    > AC_FL_RunContent(
    > 'codebase','
    http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
    >
    version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
    > Video002','quality','high','pluginspage','
    http://www.adobe.com/shockwave/downloa
    >
    d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
    > //end
    > AC code
    > </script><noscript><object
    > classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    > codebase="
    http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
    > rsion=9,0,28,0" width="350" height="350"
    title="IntroVideo">
    > <param name="movie" value="IntroVideo002.swf" />
    > <param name="quality" value="high" />
    > <embed src="IntroVideo002.swf" quality="high"
    > pluginspage="
    http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
    > n=ShockwaveFlash" type="application/x-shockwave-flash"
    width="350"
    > height="350"></embed>
    > </object></noscript>
    > </div>
    > <div class="contentIndexWelcome">
    >
    <!--<center><h2>Welcome</h2></center>
    > <hr/>-->
    > <p class="smallText">Paragraph 1</p>
    > <p class="smallText">Paragraph 2</p>
    > <hr/>
    > <ul><u class="smallText">Unordered
    List</u>
    > <li><span class="smallText">Item
    1</span></li>
    > <li><span class="smallText">Item
    2</span></li>
    > <li><span class="smallText">Item
    3</span></li>
    > <li><span class="smallText">Item
    4</span></li>
    > <li><span class="smallText">Item
    5</span></li>
    > <li><span class="smallText">Item
    6</span></li>
    > </ul>
    > <hr/>
    > <p class="smallText">Concluding
    Paragraph</p><br />
    > </div>
    > </div>
    > <div class="bottomNavBar">
    > <p>&copy; Copyright 2008</p>
    > </div>
    > </div>
    > </body>
    >
    > *********************************
    > ***Next is the external CSS.***
    >
    > body {
    > font-family: Arial, Helvetica, sans-serif;
    > background-color: #999999;
    > margin: 0px;
    > }
    >
    > .header {
    > background-color: #FFFFFF;
    > width: 100%;
    > margin: 0px;
    > padding: 0px 0px 0px 0px;
    > top: 0px;
    > }
    >
    > .container {
    > background-color: #FFFFFF;
    > width: 800px;
    > margin-left: auto;
    > margin-right: auto;
    > margin-bottom: 0px;
    > margin-top: 0px;
    > }
    >
    > /* top navigation bar class
    > ** I prefer to have a nav bar to the top rather than the
    left
    > */
    > .topNavBar {
    > width: 800px;
    > height: 22px;
    > background-color: #0080EE;
    > border: 0px solid #FFFFFF; /* I turned off the pixel
    width because I
    > didn't
    > ** want a border right now. But I left the rest in case
    > ** I wanted to change it back to 1px.
    > */
    > }
    >
    > /* topNavBar link properties
    > ** The idea is to have each link highlight when cursor
    comes over any part
    > ** of the section, not just the words. Then goes back to
    normal when
    > cursor
    > ** leaves. The current page should have its own link
    highlighted always.
    > */
    > ul.topNavBarUL {
    > height: 17px;
    > float: left;
    > width: 100%;
    > padding: 0;
    > margin: 0;
    > list-style-type: none;
    > }
    >
    > li.topNavBarLI {
    > display: inline;
    > }
    >
    > a.topNavBarLinks:link, a.topNavBarLinks:active,
    a.topNavBarLinks:visited {
    > float: left;
    > text-decoration: none;
    > color: #FFFFFF;
    > background-color: #0080EE;
    > padding: 0.15em 0.6em;
    > border-right: 1px solid #FFFFFF;
    > }
    >
    > a.topNavBarLinks:hover {
    > color: #FFFFFF;
    > background-color: #FF9900;
    > text-decoration: none;
    > }
    >
    > a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
    > a.topNavBarLinksCurrent:visited,
    a.topNavBarLinksCurrent:hover {
    > float: left;
    > text-decoration: none;
    > color: #FFFFFF;
    > background-color: #00FF33;
    > padding: 0.15em 0.6em;
    > border-right: 1px solid #FFFFFF;
    > }
    >
    > /* content class
    > ** This is the part of the page that the content will go
    in.
    > ** It should have the full width of the container class
    and
    > ** stretch in height based on the content with a minimum
    > ** height of 500px.
    > */
    > .content {
    > width: 800px;
    > min-height: 400px;
    > background-color: #FFFFFF;
    > font-family: Arial, Helvetica, sans-serif;
    > color: #000000;
    > }
    >
    > /* content links
    > ** The links in the content area will just be the
    regular links.
    > ** Navigation links will all be given special classes to
    define them.
    > */
    > a:link, a:active, a:visited {
    > color: #0080EE;
    > text-decoration: none;
    > }
    >
    > a:hover {
    > color: #FF9900;
    > text-decoration: underline;
    > }
    >
    > /* content headings, hr
    > */
    > h1, h2, h3, h4, h5, h6 {
    > font-family: Arial, Helvetica, sans-serif;
    > color: #00FF33;
    > margin-bottom: 2px;
    > }
    >
    > hr {
    > color: #0080EE;
    > }
    >
    > p {
    > text-indent: 20px;
    > margin-top: 4px;
    > }
    >
    > ul {
    > margin-top: 4px;
    > }
    >
    > li {
    > list-style: square;
    > color: #00FF33;
    > }
    >
    > .contentIndexFlashIntro {
    > padding-top: 2px;
    > padding-right: 2px;
    > float: right;
    > }
    >
    > .contentIndexWelcome {
    > float: left;
    > text-align: justify;
    > padding-top: 4px;
    > padding-right: 10px;
    > padding-bottom: 4px;
    > padding-left: 4px;
    > }
    >

  • CSS Display Problems

    Hi everyone, I hope someone can help me out with this
    problem.
    My website displays fine in all the browser that I've tested,
    but I've restenly noticed that areas are rendered wrong in the
    Google Cache snapshot?
    Example:
    My Site:
    www.dcypher.co.uk
    Click
    to view Google Cache Snapshot
    This is the CSS code I have for the 2 column's in the body
    that are displaying incorrectly:
    #main {
    background-image: url(images/mainBackground.gif);
    background-repeat:repeat-y;
    background-color: #666666;
    width: 700px;
    height: 100%;
    margin: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow: auto;
    #mainText {
    width: 434px;
    margin: 0px;
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    float:left;
    #mainNav {
    width: 156px;
    margin: 0px;
    padding-top: 40px;
    padding-right: 25px;
    padding-bottom: 40px;
    padding-left: 25px;
    float:left;
    I hope someone can shed some light on this for me as i'm
    completely stumped.
    Thanks in advance.
    Webbo

    Yes...the pages from the book display perfectly in dw8, but
    not in DWcs3.
    I found that by commenting out the "clear:left;" under "#nav"
    the page displays properly in DWcs3, too. That leaves open the
    question of "why".
    Thanks.

  • Css aside problem

    i have a little problem in css and i dont know how to fix it...
    html
    <article class="content">
        <h1>header text</h1>
        <aside>
          <p>texto</p>
          <p>alala</p>
          <p>lalala</p>
          <p>alala</p>
          <p>alala</p>
          <p>lalal</p>
          <p>lala</p>
          <p>lala</p>
        </aside>
        <section>
          <p>paragraph text</p>
          <p>another p text</p>
        </section>
      </article>
    yellow background is aside , inside container and next to section
    aside {
    float: left;
    width: 180px;
    background: #EADCAE;
    height: auto;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
    section {
    margin-top:15px;
    margin-bottom:15px;
    width: auto;
    display:block;
    .container {
    width:auto;
    max-width:960px;
    padding: 10px;
    top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    obviously i want the aside next to the section be inside the container.
    i do not use width in pixels bacuse other pages do not have aside and its a liquid container
    so.. i don´t know where im wrong

    Based on what you are asking we do not have enough of the code to solve your problem.  You are saying that the yellow "aside" should be within the grey section.  But the grey section is either not in the "container" class or the container class is also defined somewhere else on your stylesheet with the background which we cannot see.
    There is nothing wrong with the code you have posted.  We are going to have to see more of what's around the "article" to solve this problem.  I'd also recommend running your site through the validator at this point: http://validator.w3.org/

  • Css upload problem

    I've just installed CS3 Design Premium and made changes to a
    css file and uploaded it to the remote host using the put button.
    The page did not find the stylesheet and displayed all over the
    place. I then went to another pc and uploaded the same file to the
    same place using Dreamweaver 8 and the page found the css and
    displayed correctly. I then tried it on a different site with the
    same result - CS3 went missing while the same file uploaded with
    DW8 had no problems. View source on both pages showed the correct
    link to the stylesheet.
    I'm a bit confused - has any body had a similar experience or
    know what's causing this?

    IE uses different basic settings for margins, padding, etc. in fact no two browser are exactly the same, this is why so many css 'hack's' are around, and also why if your styles overwrite any other css styles in a css script, 'odd' behavior can occur.
    One solution is to always start yor css with a css reset, and whenever you attach a css file or change your css you should always review it.
    for info on css reset see: http://meyerweb.com/eric/tools/css/reset/
    Another solution is to use IE conditional statments to change the css to IE specific settings
    Format for IE conditional statment is:
    <!--[if IE]>
    <style type="text/css">
    enter your revised style here
    </style>
    <![endif]-->
    HTH
    PZ

  • DW/CSS Table problem

    Hi guys:
    I have been working with CSS in DW for a while now but it
    always makes me mad when I cant Firefox and IE to look the page
    same. I guess its a problem with setting the width of the table. I
    have done it but somewhere I am missing the obvious . It works fine
    in FF but messes up in IE (Grrrrr). Please help! Here what I have
    been working on :
    quote:
    <html><head><title>MNTP</title>
    <style>
    <!--
    * body {
    background-color: #21B6AD;
    .hr { background:#000; height:1px; font-size:1px; }
    .bgimg { float:left; padding: 30px; margin: 10px; background:
    url(bgimg.gif) #CEDEA5; }
    .width720 { width: 718px; margin: 0 10px 10px; }
    .leftmenu150 { width: 150px; margin: 0 10px; }
    .width300 { width: 300px; margin: 0 10px; }
    .width80p { width: 80%; margin: 0 auto; }
    #test { border:3px solid red; padding:1em; }
    .element { background: gray; padding: 16px; }
    /* #glow { border: solid 1px red; } */
    .someclassContainer { width: 160px; float: left; margin:0
    10px; height:160px; }
    .someclass {
    background: #3300ff;
    border: solid 5px yellow;
    padding: 22px;
    height:100px;
    .leftmenuContainer { width: 150px; float: left; margin:0
    10px; height:160px; }
    .leftMenu {
    background: #FFEBDE;
    border: solid 5px #FFEBDE;
    padding: 5px;
    height:100px;
    .bottommenuContainer { width: 680px; float: left; margin:0
    10px; height: 70px; }
    .bottomMenu {
    background: #ADB6A5;
    border: solid 5px #ADB6A5;
    padding: 5px;
    height:50px;
    .box_1_Container { width: 510px; float: left; margin:0 10px;
    .box_1_Menu {
    background: #FFF7CE;
    border: solid 5px #FFF7CE;
    padding: 10px;
    .left { width: 80px; float: left; }
    .clear { clear: both; }
    #onlyTop { background: #7B3; border: solid 3px yellow;
    border-bottom: none; padding: 20px; }
    #onlyBottom {
    background: #CEE3EF;
    border: solid 3px #CEE3EF;
    border-top: none;
    padding: 5px;
    text-align: left;
    #onlyLeft { background: #7B3; border: solid 2px yellow;
    border-right: none; padding: 20px; }
    #onlyRight { background: #362; border: solid 2px yellow;
    border-left: none; padding: 20px; }
    #withbgimg1 { color: white; border: solid 1px #85ADC3;
    padding:3em;
    background: url(gradient.gif) #003B62; background-repeat:
    repeat-x; }
    #withbgimg1 * { color: white; }
    #withbgimg2 {
    background: #CEDEA5 url(bgimg.gif); background-repeat:
    repeat-x;
    padding: 30px; color: black; }
    #withbgimg2 * { color: black; }
    //.style1 {font-family: Arial, Helvetica, sans-serif}
    .style2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #F78618;
    .style3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #21287B;
    .basestyle{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    color:#000000;
    .clearText{
    font-family:Arial, Helvetica, sans-serif;
    font-size:8px;
    visibility:hidden
    .leftmenuText{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    color:#531560;
    .bottommenuText{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:10px;
    color:#000000;
    -->
    </style>
    <script type="text/javascript" type="text/javascript"
    src="cssquery2-p.js"></script>
    <script type="text/javascript" type="text/javascript"
    src="ruzeeborders.js"></script>
    <script type="text/javascript"
    type="text/javascript"><!--
    RUZEE.Borders.add({
    '#test': { borderType:'shadow', cornerRadius:10,
    shadowWidth:20 },
    '#glow': { borderType:'glow', cornerRadius:4, glowRadius:5,
    glowColor:'white' },
    '.someclass': { borderType:'simple', cornerRadius:20,
    height:100 },
    '.leftMenu': { borderType:'simple', cornerRadius:12,
    height:100 },
    '.bottomMenu': { borderType:'simple', cornerRadius:12,
    height:50 },
    '.box_1_Menu': { borderType:'simple', cornerRadius:12 },
    '#onlyTop, #onlyBottom, #onlyLeft, #onlyRight':
    { borderType:'simple', cornerRadius:12, shadowWidth:0 },
    '#onlyTop': { edges:'lrt' },
    '#onlyBottom': { edges:'lrb' },
    '#onlyLeft': { edges:'ltb' },
    '#onlyRight': { edges:'rtb' },
    '#withbgimg1': { borderType:'simple', cornerRadius:20 },
    '#withbgimg2': { borderType:'shadow', cornerRadius:10,
    shadowWidth: 10 }
    window.onload=function(){
    //alert("sd");
    RUZEE.Borders.render();
    //-->
    </script>
    <script src="Scripts/AC_RunActiveContent.js"
    type="text/javascript"></script>
    </head>
    <body>
    <table width="720" border="0" align="center"
    cellpadding="0" cellspacing="0">
    <tr>
    <td align="center" valign="top"><script
    type="text/javascript">
    AC_FL_RunContent( 'codebase','
    http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','720','height','275','align','absmiddle','src','mntp_top_1','q
    uality','high','pluginspage','
    http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','mntp_top_1'
    ); //end AC code
    </script><noscript><object
    classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
    http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
    width="720" height="275" align="absmiddle">
    <param name="movie" value="mntp_top_1.swf" />
    <param name="quality" value="high" />
    <embed src="mntp_top_1.swf" width="720" height="275"
    align="absmiddle" quality="high" pluginspage="
    http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
    type="application/x-shockwave-flash"></embed>
    </object></noscript></td>
    </tr>
    <tr>
    <td><div class="width720" align="center">
    <div id="onlyBottom">
    <!--//*******Inside Table***************Inside
    Table*************Inside Table************-->
    <table width="720" border="0" cellspacing="0"
    cellpadding="0" align="center">
    <tr>
    <td valign="top"><strong><span
    class="style2">    WELCOME
    </span> <span class="style3">TO THE MNTP WEBSITE
    !</span></strong><br />
    <br /></td>
    </tr>
    <tr>
    <td>
    <!--//*******Inside Table***************Inside
    Table*************-->
    <table width="680" border="0" cellspacing="0"
    cellpadding="0">
    <tr>
    <td width="160" valign="top">
    <div class=" leftmenuContainer">
    <div class=" leftMenu">
    <span class="leftmenuText"><strong>
    CNBC <br>
    Graduate Program <br>
    Link 1 <br>
    Link 1 <br>
    Link 1 <br>
    Link 1 <br>
    </strong>
    </span>
    </div>
    </div>
    </td>
    <td width="520" valign="top">
    <!--//*******Boxes********-->
    <div class=" box_1_Container">
    <div class=" box_1_Menu">
    <span class="style2"><strong>StatsReader v2.1
    HowTo:</strong></span> <br>
    <span class="basestyle">
    New in 2.0: if setting target size to "0" you can use
    StatsReader
    to add keyframes in desired locations. Make sure to use a
    different
    filename for the target file and set that file up in xvid as
    first
    pass statsfile. Since the frametypes are gathered from the
    first
    pass file, setting them only in a ... more
    </span>
    </div>
    </div>
    <!--//*******Break********-->
    <p><span
    class="clearText">T</span></p>
    <!--//*******Break********-->
    <div class=" box_1_Container">
    <div class=" box_1_Menu">
    <span class="style2"><strong>TYPES OF LICENSES:
    </strong></span> <br>
    <span class="basestyle">
    In order to install and use the Software, You must obtain
    one of the following two types of licenses: (1) Evaluation
    License or (2) Commercial Use License.
    If You would like to try using the Software before
    purchasing a Commercial Use License, then You may wish to
    obtain an Evaluation License. This will allow You to use
    the Software for free for a period of up to thirty (30)
    </span>
    </div>
    </div>
    <!--//*******Boxes********-->
    </td>
    </tr>
    </table>
    <!--//*******Inside Table***************Inside
    Table*************-->
    </td>
    </tr>
    <tr>
    <td ><div class=" bottommenuContainer">
    <div class="bottomMenu"
    align="center"><br><span
    class="bottommenuText">Number 1 in someclass where all have
    height:100px</span>
    </div>
    </div></td>
    <td width="0"></td>
    </tr>
    </table>
    <!--//*******Inside Table***************Inside
    Table*************Inside Table************-->
    </div>
    </div></td>
    </tr>
    <tr>
    <td width="0"></td>
    </tr>
    </table>
    </body>
    </html>
    Thanks

    I can tell you no one will wade through all of this code.
    Just glancing at it and I can see all sorts of problems. You need
    to isolate the problem and work on the basic structure of your
    page.
    I would recommend starting again and use a good semantic
    guide to building Web pages. Go for a book that uses well formed
    html and CSS for layout and styling. I would definitely advise you
    to avoid table layouts, especially if you want to get the best
    chance of seeing your designs render correctly in all modern
    browsers.
    Try HTML Mastery and CSS Mastery, both published by Friends
    of Ed, and armed with these books you will have a great start on
    the road to design heaven!
    Regards

  • Padding problem

    On the index page only the Google ad displays lower than the header. All other pages display ok.
    www.teampenninginfo.com
    </div>
      <div id="rightside" class="brd-thin-white-top">
      <h2> </h2><script type="text/javascript"><!--
    google_ad_client = "pub-8719045379654380";
    /* 180x150, created 3/2/11 */
    google_ad_slot = "3005504289";
    google_ad_width = 180;
    google_ad_height = 150;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    #rightside             {
        float:left;
        width:210px;
        padding: 20px;
    #rightside h2        { font-size:18px; font-weight:bold; color:#000; margin:1.5em 0 .5em 0; }
    #rightside p        { line-height:180%; font-size:12px; font-weight:normal; color:#000; margin:1em 0;  }
    Any suggestions?

    Didn't understand most of what I was doing but managed to fix
    enough to get the page to display correctly...
    Good job!!   As you get deeper into web design, you'll learn that 90% of browser rendering problems are caused by malformed code.  If you take steps to check your code often during development, you'll avoid many hassles.
    Do you have any suggestions for easy to understand css and xhtml lessons or tutorials?
    Sure.  Start here:
    HTML & CSS Tutorials - http://w3schools.com/
    How to Develop with CSS?
    http://phrogz.net/css/HowToDevelopWithCSS.html
    Learn CSS positioning in 10 Steps
    http://www.barelyfitz.com/screencast/html-training/css/positioning/
    Code Validation Tools
    CSS - http://jigsaw.w3.org/css-validator/
    HTML - http://validator.w3.org/
    Best of luck with your project!!
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • HP Mini 210-1000sa Track Pad Problem

    I've just bought a HP Mini 210-1000sa and I'm finding the Track pad truely AWFUL to use - not at all up to the usual HP high quality.
    As the left and right buttons are part of the track pad "sensitive" area, when you use one finger to position the cursor then touch the left button area with another finger the track pad will either:
    a) move the cursor to a new position!
    b) ignore your click because you already have a finger touching the pad (leading to having to make several click attempts!
    c) it might work
    A further problem is that although the buttons give a re-assuring "click", as they are part of the "sensitive" area of the pad, if your finger is too high on the paad (ie outside the marked area of the button), it will still "click" but nothing happens.
    Is there an update (software or hardware) to fix this problem?  I'm finding it unusable as it is, I have to use an external usb or bluetooth mouse.  This partly defeats the object of having an ultra portable device!
    Thanks for any help ...
    Gavin
    Gavin

    Hi I bought recently HP Mini 210-1118TU laptop, I am observing that bottom of laptop is gettign very hot, I am not sure how to check whether fan is working or not, or how to check PCU temperature. What is the maximum temperature that it can go to, I am unable to enter bios settings by pressing Fn+F10, Pls help me with these issues, Regards Sabir

  • CSS Layout problems

    I should start this by saying I am very new to CSS layouts,
    and am self taught, so I'm probably doing something very wrong. So
    far I've stuck to really simple layouts and had no problems...but
    they were very simple layouts.
    With the site I'm doing at the moment I have placed other
    div's inside a content div, so that I can have left and right hand
    content within the content div. But the left and right div's are
    not pushing the content div down with their content, and I'm not
    sure what else to try to get it to work.
    I've tried setting the height of the content div to auto or
    inherit but that doesn't work.
    As you can see on the main page of the site I'm using a
    background image in the content cell.
    http://members.westnet.com.au/zelky/surfschoolnew/index.html
    And if you look at the details page you can see what I am
    trying to describe. The content div not pushing down with the left
    and right content div’s contents means the background image
    is just a few pixels deep under the nav div.
    http://members.westnet.com.au/zelky/surfschoolnew/details.html
    And my pathetic CSS/stylesheet is here:
    http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
    Thanks in advance and hopefully my mess isn’t’ to
    hard to look at. As I said I'm a bit lost so hopefully I'm not
    going to confuse anyone with my "home made" skills.

    When you 'float' elements on your page you effectively remove
    them from
    the normal flow of the document, therfore the 'content'
    <div> thinks
    nothing is inside it. You need to help it by 'clearing' the
    floats.
    There are various methods for clearing floats.
    Insert a 'clearing' <br> (shown below) into your pages
    code directly
    AFTER the closing 'right' container tag and BEFORE the
    closing 'content'
    container tag.
    </div><!-- end 'right' -->
    <br style="clear: both;" />
    </div><!-- end 'content' -->
    zelky wrote:
    > I should start this by saying I am very new to CSS
    layouts, and am self taught,
    > so I'm probably doing something very wrong. So far I've
    stuck to really simple
    > layouts and had no problems...but they were very simple
    layouts.
    >
    > With the site I'm doing at the moment I have placed
    other div's inside a
    > content div, so that I can have left and right hand
    content within the content
    > div. But the left and right div's are not pushing the
    content div down with
    > their content, and I'm not sure what else to try to get
    it to work.
    >
    > I've tried setting the height of the content div to auto
    or inherit but that
    > doesn't work.
    >
    > As you can see on the main page of the site I'm using a
    background image in
    > the content cell.
    >
    >
    http://members.westnet.com.au/zelky/surfschoolnew/index.html
    >
    > And if you look at the details page you can see what I
    am trying to describe.
    > The content div not pushing down with the left and right
    content div?s contents
    > means the background image is just a few pixels deep
    under the nav div.
    >
    >
    http://members.westnet.com.au/zelky/surfschoolnew/details.html
    >
    > And my pathetic CSS/stylesheet is here:
    >
    >
    http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
    >
    > Thanks in advance and hopefully my mess isn?t? to hard
    to look at. As I said
    > I'm a bit lost so hopefully I'm not going to confuse
    anyone with my "home made"
    > skills.
    >
    >

  • Css layout problems - css and tables

    Hi guys,
    Well as some of you suggested months ago, I've been trying to
    learn to layout with CSS... It's actually getting a bit rewarding
    now as I start to figure a few things out but there's still plenty
    of questions!!!
    If anyone can take a look at what I'm working on at the
    moment and give me some help I'd REALLY REALLY appreciate it!!
    My main trouble (I think) is working with a drop-down menu
    system that I found on the web and I'm dying to use it because it's
    perfect for this design. It's layed out using a table so I'm trying
    to incorporate that...
    Click
    [url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
    for a picture of what i'm trying to get this page to look like and
    [url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
    to see how far I've got. You can download the stylesheet from
    [url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
    Here's what I need to know:
    1. I'm trying to push the table down so it looks better lined
    up with the logo but when I tell it to be further from the top, it
    doesn't seem to move. Any ideas on why?
    2. As you can see, I've inserted some blank space into the
    middle of the menu so that the logo doesn't cover any of the menu
    items. I can't seem to get the same 1px black border on this
    section.
    I assume this is because the border on the other parts is a
    layer/div border? Will I have to somehow put a div in there so as
    to create the same border effect?
    3. I'd really like to keep the header and footer visible at
    all times, even if there's lots of content to scroll through. I
    found this:
    http://www.cssplay.co.uk/layouts/basics2.html#Top
    but when I tried to implement this on my page, it all went haywire!
    Is this going to be a possibility?
    4. I guess other than that, have I completely stuffed this
    up!? I don't think I have but it's worth asking I guess!
    THANKS IN ADVANCE! I'm really loving using css layout rather
    than tables - it's soooo much more versatile. I just need to get
    past some obstacles I think!
    Cheers
    Neil

    On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
    <[email protected]> wrote:
    >Ok, I made your suggested changes and have this:
    >
    > body {
    > font-family: Georgia, "Times New Roman", Times, serif;
    > text-align: center;
    > font-size: 1em;
    > font-style: normal;
    > text-decoration: none;
    > top: 15px;
    > background-image:
    url(/images/backgrounds/background1.gif);
    > padding-top: 15px;
    >>>> width: 70%;
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    > }
    >
    > #body {
    > margin: 0 auto;
    > text-align:left;
    > width: 760px;
    > padding-right: 20px;
    > padding-bottom: 20px;
    > padding-left: 20px;
    > background-color: #FFFFCC;
    > padding-top: 20px;
    > font-family: Georgia, "Times New Roman", Times, serif;
    > font-size: 1em;
    > color: #003366;
    >
    > }
    >
    >
    http://www.japanesetemari.com
    >
    > The page is on the left size of the screen and the
    yellow box does not expand
    >out. Not exactly what I'd wanted. I like to take
    advantage of larger screens
    >and have the page expand out but not so far out so the
    lines of text are real
    >long.
    > Barb
    It's this in the body style that is limiting the width -
    change that
    to 100%
    >>>> width: 70%;
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    > }
    ~Malcolm N....
    ~

  • CSS Layout Problem in DW2004

    Hi--
    I have been using DW2004 to publish my own website, and
    lately I have just started to learn CSS using one of the Macromedia
    modules which is now hosted by Adobe.
    The current lesson I'm working on is Designing with CSS in
    Dreamweaver MX 2004 Part 3: Creating Your First Design Without
    Tables . The page I'm on is page 8.
    Here is my question:
    Although I followed the instructions for creating a nav list
    using CSS, it does not render correctly in Firefox. Instead of
    looking like Fig. 13 at the bottom of page 8, I only have a
    container with the three links for Home, About Us and Search listed
    vertically with left justification and preceding dot to mark the
    list. There is no background color.
    What am I doing wrong?
    To facilitate debugging, I'm going to paste in the code from
    my CSS file and the HTML file. Here is the code from the CSS file:
    /* CSS Document */
    body{
    background-color: #666666;
    color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
    #wrapper {
    width: 770px;
    background-color: #FFFFFF;
    margin: 10px auto;
    border: 1px, solid, #000000;
    #banner {
    height: 110px;
    background-image: url(/images/CarBanner.jpg);
    background-repeat: no-repeat;
    #nav {
    border-bottom: 1px solid #000000;
    #nav ul{
    padding: 0;
    margin: 0;
    background-color: #00FF99;
    #nav ul li{
    display: inline;
    padding: 0;
    margin: 0;
    #nav ul li a{
    font-size:80%;
    color: #FFFFFF;
    background-color:#3333CC;
    text-decoration:none;
    padding:0 25px 0 25px;
    border-right: 1px solid #000000;
    text-align: center;
    width: 9em;
    #nav ul li a:hover, #nav ul li a:focus {
    background-color:#990000;
    Here is the code from the XHTML file:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="/CssFiles/basiclayout.css" rel="stylesheet"
    type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="banner"></div>
    <div id="nav"></div>
    <ul>
    <li><a href="#">Home</a></li
    ><li><a href="#">About Us</a></li
    ><li><a href="#">Search</a></li
    >
    </ul>
    </div>
    </body>
    </html>
    Thanks in advance!
    Paul Denlinger
    undefined
    page
    8

    You just simply haven't got the ul tag inside the 'nav'
    <div> in your code.
    I've put this right in the code below. Copy and paste it over
    your
    existing code. Also get into a habit of commenting where your
    <divs> end
    ie <!-- end wrapper -->. This will help you identify
    your containers
    easier as the page gets more complex.
    <body>
    <div id="wrapper">
    <div id="banner"></div>
    <div id="nav">
    <ul>
    <li><a href="#">Home</a></li
    <li><a href="#">About Us</a></li
    <li><a href="#">Search</a></li
    </ul>
    </div><!-- end nav -->
    </div><!--end wrapper -->
    </body>
    pdenlinger wrote:
    > Hi--
    >
    > I have been using DW2004 to publish my own website, and
    lately I have just
    > started to learn CSS using one of the Macromedia modules
    which is now hosted by
    > Adobe.
    >
    > The current lesson I'm working on is Designing with CSS
    in Dreamweaver MX 2004
    > Part 3: Creating Your First Design Without Tables . The
    page I'm on is page 8.
    >
    > Here is my question:
    >
    > Although I followed the instructions for creating a nav
    list using CSS, it
    > does not render correctly in Firefox. Instead of looking
    like Fig. 13 at the
    > bottom of page 8, I only have a container with the three
    links for Home, About
    > Us and Search listed vertically with left justification
    and preceding dot to
    > mark the list. There is no background color.
    >
    > What am I doing wrong?
    >
    > To facilitate debugging, I'm going to paste in the code
    from my CSS file and
    > the HTML file. Here is the code from the CSS file:
    >
    > /* CSS Document */
    >
    > body{
    > background-color: #666666;
    > color: #666666;
    > font-family: Verdana, Arial, Helvetica, sans-serif;
    > margin: 0;
    > padding: 0;
    > text-align: left;
    >
    > }
    > #wrapper {
    > width: 770px;
    > background-color: #FFFFFF;
    > margin: 10px auto;
    > border: 1px, solid, #000000;
    > }
    > #banner {
    > height: 110px;
    > background-image: url(/images/CarBanner.jpg);
    > background-repeat: no-repeat;
    > }
    > #nav {
    > border-bottom: 1px solid #000000;
    > }
    >
    > #nav ul{
    > padding: 0;
    > margin: 0;
    > background-color: #00FF99;
    > }
    > #nav ul li{
    > display: inline;
    > padding: 0;
    > margin: 0;
    > }
    > #nav ul li a{
    > font-size:80%;
    > color: #FFFFFF;
    > background-color:#3333CC;
    > text-decoration:none;
    > padding:0 25px 0 25px;
    > border-right: 1px solid #000000;
    > text-align: center;
    > width: 9em;
    > }
    > #nav ul li a:hover, #nav ul li a:focus {
    > background-color:#990000;
    > }
    >
    > Here is the code from the XHTML file:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
    > "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="
    http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    > <title>Untitled Document</title>
    > <link href="/CssFiles/basiclayout.css"
    rel="stylesheet" type="text/css" />
    > </head>
    >
    > <body>
    > <div id="wrapper">
    > <div id="banner"></div>
    > <div id="nav"></div>
    >
    >
    <a href="#">Home</a></li
    > >
    <a href="#">About Us</a></li
    > >
    <a href="#">Search</a></li
    > >
    >
    > </div>
    > </body>
    > </html>
    >
    > Thanks in advance!
    >
    > Paul
    > Denlinger
    http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_mx200
    > 4_08.html
    http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_mx200
    > 4_08.html
    >
    > /* CSS Document */
    >
    > body{
    > background-color: #666666;
    > color: #666666;
    > font-family: Verdana, Arial, Helvetica, sans-serif;
    > margin: 0;
    > padding: 0;
    > text-align: left;
    >
    > }
    > #wrapper {
    > width: 770px;
    > background-color: #FFFFFF;
    > margin: 10px auto;
    > border: 1px, solid, #000000;
    > }
    > #banner {
    > height: 110px;
    > background-image: url(/images/CarBanner.jpg);
    > background-repeat: no-repeat;
    > }
    > #nav {
    > border-bottom: 1px solid #000000;
    > }
    >
    > #nav ul{
    > padding: 0;
    > margin: 0;
    > background-color: #00FF99;
    > }
    > #nav ul li{
    > display: inline;
    > padding: 0;
    > margin: 0;
    > }
    > #nav ul li a{
    > font-size:80%;
    > color: #FFFFFF;
    > background-color:#3333CC;
    > text-decoration:none;
    > padding:0 25px 0 25px;
    > border-right: 1px solid #000000;
    > text-align: center;
    > width: 9em;
    > }
    > #nav ul li a:hover, #nav ul li a:focus {
    > background-color:#990000;
    > }
    >
    > Here is the code from the XHTML file:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
    > "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="
    http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    > <title>Untitled Document</title>
    > <link href="/CssFiles/basiclayout.css"
    rel="stylesheet" type="text/css" />
    > </head>
    >
    > <body>
    > <div id="wrapper">
    > <div id="banner"></div>
    > <div id="nav"></div>
    > <ul>
    > <li><a href="#">Home</a></li
    > ><li><a href="#">About
    Us</a></li
    > ><li><a href="#">Search</a></li
    > >
    > </ul>
    > </div>
    > </body>
    > </html>
    >

Maybe you are looking for