Jump to content
Larry Ullman's Book Forums

Ch3, The Style.Css Of The Index.Html Should Have A 'Clear Float' Rule


Recommended Posts

Larry,

 

I think the css file for CH3 needs to add one rule to clear the float of the 'navigation' div, otherwise in the browser the first h1 of the content div is also floated:

 

/* navigation */
#navigation {
    background:#fafafa;
    border-right:1px solid #999;
    margin:0 auto;
    width:750px;
    height:40px;
    list-style:none;
}
#navigation li {
    border-left:1px solid #999;
    float:left;
    width:149px;
    list-style:none;
}
#navigation a {
    color:#555;
    display:block;
    line-height:40px;
    text-align:center;
}
#navigation a:hover {
    background:#e3e3e3;
    color:#555;
}
#navigation .active {
    background:#e3e3e3;
    color:#777;
}

/* content */
#content {
clear: left; /* should clear float */
    height:auto;
    margin:0 auto;
    padding:0 0 20px;
    width:751px;
}

Link to comment
Share on other sites

Another issue caused by this is that the result on P90 displays not very neat in the browser (Total Estimated Cost is also floated.)

 

 

To fix it, I added a class .result for it:

     // Print the results:
        echo '<h1 class="result">Total Estimated Cost</h1>
    <p>The total cost of driving ' . $_POST['distance'] . ' miles, averaging ' . $_POST['efficiency'] . ' miles per gallon, and paying an average of $' . $_POST['gallon_price'] . ' per

 

 

.result {
  clear: left;
}

 

After that, the result shows ok in the browser.

I wanted to paste screenshots here but found image extensions are not allowed.

Link to comment
Share on other sites

The design and CSS is not really the point of the book. Without being totally sure, I think Larry even used external sources for anything in that regard. I would deem this "a non-issue", even if the CSS actually have some problems. It's not really the point here.

 

With that said, I'm sure he appreciates you taking your time and sharing potential problematic code though. Good find. :)

Link to comment
Share on other sites

 Share

×
×
  • Create New...