3 replies [Last post]
Dan C
Offline
newbie
Brisbane
Last seen: 14 years 46 weeks ago
Brisbane
Joined: 2007-11-15
Posts: 3
Points: 0

Hi all, hope someone can help me Smile I've created a fixed three column site using Dreamweaver and it looks fine in IE7 and FF,however, in IE6 there is a heap of white space in the middle column which has pushed the content to the bottom of the page.

The site is very basic and is also live [www.wallersprecisiontooling.com] The version on the web at the moment hasn't been validated properly, i have done that now, however, I just haven't updated it on the web.

I don't really understand code that well hence using Dreamweaver to create the site. Apologies in advance if I haven't provided enough code or if I have provided too much...

Would appreciate any help/advice you can give me regarding the white space issue.
Thanks in advance,
Dan

@charset "utf-8"; body { font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; background-color: #152d6a; background-position: center; } .thrColFixHdr #container { width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; } .thrColFixHdr #header { padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } .thrColFixHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .thrColFixHdr #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 160px; /* padding keeps the content of the div away from the edges */ padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 20px; } .thrColFixHdr #sidebar2 { float: right; /* since this element is floated, a width must be given */ width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */ } .thrColFixHdr #mainContent { margin-top: 0; margin-right: 200px; margin-bottom: 0; margin-left: 165px; padding-top: 0; padding-right: 20px; padding-bottom: 0; padding-left: 10px; } .thrColFixHdr #footer { padding: 0 10px 0 20px; } .thrColFixHdr #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; }

body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-position: center;
float: left;
}

/* MAIN */

#mainContent a {
text-decoration: none;
color: #152D6A;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e6a013;
}

#mainContent h1 {
color: #152D6A;
font: normal 28px Impact, "Arial Narrow", sans-serif;
text-transform: lowercase;
letter-spacing: 1px;
word-spacing: 5px;
margin: 0 0 5px 0;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #e6a013;
}

#mainContent h2 {
font: normal 22px Georgia, "Times New Roman", Times, serif;
margin-top: 15px;
margin-bottom: 3px;
color: #CF0000;
border-bottom: 1px dotted #CCCCCC;
}
#mainContent p {
font-size: 13px;
margin-bottom: 5px;
width: 300px;
padding-left: 20px;
}

/* sidebar 1 */

#sidebar1 p {
color: #333333;
padding-right: 5px;
padding-left: 5px;
font-size: 11px;
float: left;
}
#sidebar1 a {
text-decoration: none;
color: #152D6A;
}
#sidebar1 .related {
margin-bottom: 10px;
padding-bottom: 45px;
background: #C9F173 url(../images/bg_related.png) no-repeat left bottom;
}

#sidebar1 .related li {
list-style: none;
display: inline;
}
#sidebar1 h2, #sidebar1 h3, #sidebar1 p {
padding-right: 5px;
padding-left: 5px;
padding-top: 10px;
}
#sidebar1 h2 {
color: #152C67;
padding-bottom: 10px;
font-size: 13px;
text-transform: uppercase;
line-height: 100%;
background: url(../images/bg_relatedhead.gif) no-repeat right top;
margin: 0;
padding-left: 5px;
padding-top: 13px;
}
#sidebar1 .related a {
display: block;
padding: 5px;
border-top: 1px solid #FFF;
text-decoration: none;
}
#sidebar1 .related a:hover {
background: #FFFFFF;
}

#sidebar1 .related ul {
margin: 0px;
padding: 0px;
font-size: 12px;
}

.featureHead {
background: url(../images/feature_bug.png) no-repeat right 0px;
}

a img {
border-style: none;
}

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

try reducing the width of

try reducing the width of both sidebars by about 10px and see if the middle content pops back into place.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Dan C
Offline
newbie
Brisbane
Last seen: 14 years 46 weeks ago
Brisbane
Joined: 2007-11-15
Posts: 3
Points: 0

Thanks for the reply,

Thanks for the reply, unfortunately it didn't work. I also have a expanded box issue and somehow I think this may be connected???
Here is the code, does this make it easier to work out the problem?

Wallers Precision Tooling

Wallers Precision Tooling
Wallers home


/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 140px; }
.thrColFixHdr #sidebar2 { width: 150px; }


/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #mainContent { zoom: 1; }
.twoColFixLtHdr #header {zoom:1;}
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

Wallers Precision Tooling

 

We are proud to be associated with:

Kyocera logo

Kyocera Ceratip

Carbide ToolingHigh Speed SteelTooling AccessoriesMeasuring Equipment

Welcome to Wallers

We offer:

  • extensive range of products and brands
  • competitive pricing
  • delivery to most major centres within 24 hours

Dan C
Offline
newbie
Brisbane
Last seen: 14 years 46 weeks ago
Brisbane
Joined: 2007-11-15
Posts: 3
Points: 0

Its fixed

Just wanted to let you know that I fixed the problem. Smile I put a width on the middle column and then tweaked it until it fit.
Thanks so much for your help :thumbsup:
Cheers
Dan