4 replies [Last post]
cardinal
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-04-11
Posts: 40
Points: 0

When I adjust the width of one of my divs by 5 pixels, it renders properly in Firefox, but the middle div drops. Any help that you can provide will be greatly appreciated.

The issue occurs when I resize the width of my #news div from 150px to 155px. When I add these 5 pixels, the #content div in the middle of the page drops. Thanks again for any help received in advance.

View the page .

I have 770 pixels to work with in my #contentWrapper. I'm not using padding.

Pieces of CSS for the four main boxes:

#contentWrapper{ width:770px; background: #FFFFFF url(images/content_bg.gif) repeat-x left top; margin: 0px; padding: 0px; }

#menu {
width: 14em;
background: #eee;
float:left;
clear:left;
}

#news {
float:right;
width:155px;
clear:right;
margin:10px 5px 0 0;
padding:0;
}

#content {
width:450px;
margin-left:150px;
}

I tried adding the following fix, but it didn't work.

*html #news { width:160px; w\idth:155px; }

ALL HTML

Management

body {
behavior: url(csshover.htc);

}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

}



 









Strategic Management



The mission of theTest Section of the Test Section is to facilitate the continuous improvement of departmental performance. This mission will be accomplished with leadership from various entities and in cooperation with other departments and non-profit organizations. Elevating efficiency can be realized through this program.


Performance


Interested in increasing efficiency and productivity within yor department through the creation and implementation of a performance management process?



Objectives


The Test section will accomplish its mission by:


  • Assisting in the Development of strategic plans, facilitating the incorporation of strategy into operational budgets.

  • Assisting in the identification and analysis of emerging issues and strategies.

  • Developing an analytical framework for performance management that promotes alignment of operations as well as strategic initiaitves.

  • Coordinating the performance-related initiatives through strategic communications and sharing of best practices.









ALL CSS

/* Global Layout for all OMB pages */

body {
margin:0;
padding:15px 0 0;
font-size:62.5%;
text-align:center;
background: #dde8f6 url(./images/bg_ltblue.jpg) repeat-x left top;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

p {
font-size:1.2em;
margin: 0px;
padding: 0px 0px 7px 0;
}

h2 {
font:1.8em Verdana, Arial, Helvetica, sans-serif;
color:#333333;
border-bottom:1px dotted #999999;
padding-top: 10px;
padding-bottom: 2px;
margin-bottom: 5px;
overflow:hidden;
}

* html h2{
zoom:1;}

#wrapper {
width:770px;
margin:0px auto 0;
background-color:#FFFFFF;
text-align:left;

}

#header{
width:100%;
height: 160px;
background: #98b5d7 no-repeat left top;
}

#mainNav{
list-style:none;
background:url(images/nav_bg.jpg) repeat-x left top;
width:770px;
float:left;
margin: 130px 0px 0px;
}

#mainNav li {
float:left;
}

#mainNav a{
color:#ffffff;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
text-transform:uppercase;
text-decoration:none;
display:block;
width:10em;
padding:7px 0;
text-align:center;
}

*html #mainNav a{
height:1px;
}

#mainNav a:hover{
color:#FFFFFF;
font-weight:normal;
background: #000000 url(images/blacknav.jpg) repeat-x left top;
}

body#home a#homeLink,
body#budget a#budgetLink,
body#dea a#deaLink,
body#management a#managementLink,
body#planning a#planningLink,
body#landts a#landtsLink
{
color:#CCCCCC;
font-weight:bold;
background: #000000 url(Templates/images/caplink_black.jpg) no-repeat 5% center;
}

/*content*/

#contentWrapper{
width:770px;
background: #FFFFFF url(images/content_bg.gif) repeat-x left top;
margin: 0px;
padding: 0px;
}

/*.hasLayout {
zoom:1; }
*/

#news {
float:right;
width:155px;
clear:right;
margin:10px 5px 0 0;
padding:0;
}

*html #news {
width:160px;
w\idth:155px;
}

#news p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
}

.center {
text-align:center;
}

#news a, #news a:visited {
color:#C05F1D;
text-decoration:none;
}

#news a:hover {
color:#FFFFFF;
background-color:#7aa0cd;
}

.box {
width:150px;
background:url(./images/orange_bottom.gif) no-repeat bottom left;
margin-bottom:10px;
}

.box h3 {
background: #C6D9F1 url(./images/orange_top.gif) no-repeat top left;
margin:0;
padding:6px 8px 4px 10px;
font-size:130%;
color:#fff;
border-bottom: 1px solid #000;}

.box ul {
margin:0;
padding:14px 10px 14px 10px;
list-style:none;
font-size:1.2em;
}

.box ul li {
margin:0 0 6px;
padding:0;}

#content ul.list {
list-style-type:disc;
padding:0;
margin:0;}

#content ul.list li {
margin-left:15px;
padding:0;
line-height:1.5em;
font-size:1.2em;}

/*this is where the new list item code starts*/
#content {
width:450px;
margin-left:150px;
}

#content ul {
margin:0;
padding:0;
list-style:none;
}

ul.depts {
list-style:none;
margin:0;
padding:0;
}

#regList {
font-size: 1.2em;
}

#regList li ul {
font-weight: normal;
}

#regList li ul li {
margin-left:20px;}

#regList li {
list-style: none;
line-height:1.2em;
padding-bottom:2px;
}

#regList li ul li{
list-style:circle;
}

/*this is where the new list item code ends*/

#content p{
font-size:1.2em;
margin: 0px;
padding: 0px 0px 10px 0px;
line-height: 1.5em;
}

#content h3{
font-weight:bold;
font-size:1.6em;
padding-top: 10px;
margin: 0px;
border-bottom: 1px dashed #999999;
}

#content h4{
font-weight:bold;
color:#666666;
font-size:1.4em;
padding:5px 0;}

#content h5 {
font-weight:bold;
font-size:1.2em;
margin: 0px;
padding: 5px 0px 0px;
}

#content a, #content a:visited {
color:#C05F1D;
text-decoration:none;
}

#content a:hover {
color:#FFFFFF;
background-color:#7aa0cd;
}

#leftColumn {
float:left;
width:220px;
}

#rightColumn {
float:right;
width:220px;
}

#leftColumn p, #rightColumn p {
font-size:1.2em;
padding:0;
line-height:1.3em;}

#leftColumn h4{
color:#666666;
font-size:1.2em;
padding:1px 0;}

#rightColumn h4{
color:#666666;
font-size:1.2em;
padding:1px 0;}

/*tooltips*/
Begin edits

#info p {margin-left:15px; margin-right:20px;}
#info img {margin:15px; float:left;}
#info h1 {margin-left:15px;}
/* the style starts here */
a.tooltip {color:#B31B34;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:10px; left:50px; padding:5px; font-weight:normal; color:#4F5559; border:1px solid #888; background-color:#D4DDED; width:200px; font-size:.90em;}

#footer {
width:770px;
clear:both;
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
background: #4979b2;
margin-top:10px;
}

#footer a, #footer a:visited{
color:#E4E4E4;
font: 1.1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}

#footer a:hover {
color:#C05F1D;
}

.form {
padding:7px 0;
}

.analyst {
float:right;
border:#999999 1px solid;
clear:right;
}

img.picture {
margin:7px 5px;
}

.bold {
font-weight:bold;}

img.right {
float:right;
padding:2px 2px;
margin:10px;
border:#666666 solid 1px;
background:#fff;}

.ugov {
margin: 20px 10px 0 10px;
}

#content a.pdf, #content a.pdf:visited {
background: url(images/pdficon_small2.gif) no-repeat right center ; padding-right:20px;}

#content a.pdf:hover {
background-color:#7aa0cd;
color:#FFFFFF;}

#content a.excel, #content a.excel:visited {
background: url(images/excel.gif) no-repeat right center ; padding-right:20px;}

#content a.excel:hover {
background-color:#7aa0cd;
color:#FFFFFF;}

img.figure {
float:right;
clear:right;
border:1px #666666 solid;
margin:5px;
padding:5px;
background-color:#fff;

}

dl.curved {background:#7f7f9c url(c_tl.gif) top left no-repeat; margin:5px 0; padding:0; width:50%;}
dl.curved dt {background:transparent url(c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;}
dl.curved dd {background:#eee url(c_bl.gif) bottom left no-repeat; padding:0; margin:0;}
dl.curved dd p {margin:0; padding:10px; line-height:1.3em;}
dl.curved dd p.last {background:transparent url(c_br.gif) bottom right no-repeat; }

#dropdown {
clear:both;
text-align:center;}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Start by fixing the html

Start by fixing the html code errors. Better still, switch to a STRICT doctype and then fix the code errors. Come on back if the problem persists.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

cardinal
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-04-11
Posts: 40
Points: 0

Problem Persists: The CSS and HTML both validate, and...

I changed the Transitional doctype to a Strict doctype and the problem still persists.

However, when switching to a Strict doctype, I get a warning that says "Unable to Parse Mode!" during the validation process. While it validates, I don't know how to remedy this error. As a result, I changed the doctype back to the original Transitional doctype.

Any other ideas? I would have thought this to be a more simple fix. Unfortunately, I am at a complete loss here. The only alternative that I can see is to make the wrapper bigger, which I really don't want to do. It seems like a bug to me.

Thank you for your suggestions. I'm open to any others that you might have.

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 10 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

It's the double margin bug

It's the double margin bug on the side of a float that touches its parents edge. The fix is to add display:inline.

#news { float:right; width:155px; clear:right; margin:10px 5px 0 0; padding:0; display:inline }

The fix is just a lucky accident in IE's rendering engine as floats cannot be display:inline, which is why its a totally safe fix.

cardinal
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-04-11
Posts: 40
Points: 0

Thank you!!!

That fixed it.

I also noticed that when I removed any padding and margins from the #news div and applied those characteristics to the elements inside of the div, that things worked a bit better as well.

Thanks again for taking the time to review this and provide your insight. Whew!

Have a great day,
Cardinal