Three column div problems - breadcrumb bar and footer

Question

o2mcgovem 0 Newbie Poster

16 Years Ago

Hello. I'm new here, just joined because you all seem rather knowledgeable and I'm in need of some help. I'm making a website for my philosophy class at Pisp.co.uk and it works great in all browsers (IE7, IE8 beta 2, Chrome/Safari, Firefox, Opera) except Internet Explorer 6.

There's two problems. The first is with the breadcrumb bar at the top and the other is with the footer at the bottom of the page.

The breadcrumb bar at the top is kinda cut off in IE6, displaying what's supposed to go on the left in the centre and nothing else. See picture...
The middle section in the footer drops down, and the links in the middle are pushed right to the edge of the section. See picture...

To be honest, I'm not all that good with CSS/HTML and I'm really not sure about editing what I already have. The breadcrumb bar at the top uses code that I got from matthewjamestaylor.com because I had trouble getting DIVs in three columns.

Here's the code for the breadcrumb bar:

.colmask {
	position: relative;
	clear: both;
	float: left;
	width: 100%;
	overflow: hidden;
	padding-top: 3px;
}
.holygrail {
	background: #F2F2F2;
}
.holygrail .colmid {
	float: left;
	width: 200%;
	margin-left: -300px;
	position: relative;
	right: 100%;
	background: #F2F2F2;
}
.holygrail .colleft {
	float: left;
	width: 100%;
	margin-left: -50%;
	position: relative;
	left: 345px;
	background: #F2F2F2;
}
.holygrail .col1wrap {
	float: left;
	width: 50%;
	position: relative;
	right: 45px;
	margin-top: 0;
}
.holygrail .col1 {
	margin-right: 300px;
	margin-left: 50px;
	position: relative;
	left: 200%;
	overflow: hidden;
	padding-top: 7px; 
	z-index: 2;
}
.holygrail .col2 {
	float: left;
	float: right; 
	width: 45px; 
	position: relative;
	right: -6px;
	padding-bottom: 4px;
}
.holygrail .col3 {
	float: left;
	float: right; 
	width: 295px;
	margin-right: 0px; 
	position: relative;
	left: 50%;
}
.searchbox {
	width: 200px;
	background-color: white;
	border: 1px gray solid;
	padding: 3px;
	margin-top: 4px;
}

<div class="colmask holygrail">
	<div class="colmid">
		<div class="colleft">
			<div class="col1wrap">
				<div class="col1">
					<!-- Column 1 start -->
					<a href="../default.htm">Pisp.co.uk</a>
					<strong>&gt;</strong>
					Learn
					<!-- Column 1 end --></div>
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				<img alt="P" height="32" src="http://www.pisp.co.uk/resources/images/pisp_icon.png" title="Home" width="32" />
				<!-- Column 2 end --></div>
			<div class="col3">
				<!-- Column 3 start -->
				<form id="cse-search-box" action="http://www.google.com/cse" style="margin-bottom: 0;">
					<input name="cx" type="hidden" value="009021556851105776220:efftq1wezpu" />
					<input name="ie" type="hidden" value="UTF-8" />
					<input class="searchbox" name="q" onfocus="doClear(this)" type="text" value="" />
					<input name="sa" type="submit" value="Search" />
					<!-- <input name="sa" src="resources/images/menu/magnifier.png" style="position: absolute; margin-top: 0; right: 15px; top: 6px" type="image" value="search" /> -->
				</form>
				<!-- Column 3 end --></div>
		</div>
	</div>
</div>

And here's the code for the footer:

#footer {
	width: 892px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
	font-family: 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', Lucida, sans-serif;
}
#footer p {
	width: 94%; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 6px;
	padding-bottom: 6px;
	font-weight: bold;
	color: white;
}
#footer1 {
	float: left;
	width: 30%;
	margin: 0;
	padding: 0;
	padding-bottom: 7px;
	top: 0;
}
#footer2 {
	float: right;
	width: 30%;
	margin: 0;
	padding: 0;
	padding-bottom: 7px;
	top: 0;
}
#footer3 {
	margin: 0 35% 0 35%;
	padding: 0;
	width: 30%;
	padding-bottom: 7px;
	top: 0;
}
#button {
	width: 94%;
	padding: 0 0 1em 0;
	background-color: aqua;
	color: #333;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0;
	border: 1px #CCCCCC solid;
	border-bottom: 0;
}
#button ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#button li {
	border-bottom: 1px #CCCCCC solid;
	margin: 0;
}
#button li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid;
	background-color: white;
	text-decoration: none;
	width: 100%;
}
html > body #button li a {
	width: auto;
}
#button li a:hover {
	border-left: 10px solid;
}
#button li a.learn {
	color: #3399FF;
	border-left-color: #3399FF;
}
#button li a.learn:hover {
	color: white;
	background-color: #3399FF;
	border-left-color: #3399FF;
}
#button li a.flux {
	color: #FF0066;
	border-left-color: #FF0066;
}
#button li a.flux:hover {
	color: white;
	background-color: #FF0066;
	border-left-color: #FF0066;
}
#button li a.interact {
	color: #FF9900;
	border-left-color: #FF9900;
}
#button li a.interact:hover {
	color: white;
	background-color: #FF9900;
	border-left-color: #FF9900;
}
#button li a.about {
	color: #33CC33;
	border-left-color: #33CC33;
}
#button li a.about:hover {
	color: white;
	background-color: #33CC33;
	border-left-color: #33CC33;
}
/* Advert */
#blockad {
	width: 892px;
	position: relative; 
	margin-top: 3em;
	margin-right: auto;
	margin-left: auto;
	background-color: #F2F2F2;
}
#blockad_inner {
	margin-left: 1px;
	margin-right: 1px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: smaller;
	padding: 8px;
	text-align: center;
}
div#blockad div#blockad_inner p {
	font-size: x-small;
	text-align: left;
	margin: 0;
	padding: 0 0 5px 0;
}
.action {
	padding-left: 50px;
	background-position: 15px center;
	background-repeat: no-repeat;
	background-image: url('../images/icons/arrow_right.png');
}

<div id="footer">
	<div id="footer1"><p>Site sections</p>
		<div id="button">
			<ul>
				<li ><a class="learn" href="http://www.pisp.co.uk/learn/">Learn</a></li>
				<li><a class="flux" href="http://www.pisp.co.uk/flux/">Flux</a></li>
				<li><a class="interact" href="http://www.pisp.co.uk/interact/">Interact</a></li>
				<li><a class="about" href="http://www.pisp.co.uk/about/">About</a></li>
			</ul>
		</div>
	</div>
	<div id="footer2"><p>Important places</p>
		<div id="button">
			<ul>
				<li><a href="http://www.pisp.co.uk/">Home</a></li>
				<li><a href="http://www.pisp.co.uk/editors/">Editors login</a></li>
				<li><a href="http://creativecommons.org/licenses/by-nc-sa/2.0/uk/">Creative Commons license</a></li>
				<li><a href="http://www.tmk-history.pwp.blueyonder.co.uk/">TMK History</a></li>
			</ul>
		</div>
	</div>
	<div id="footer3"><p>Stay-in-the-loop</p>
		<div id="button">
			<ul>
				<li><a href="http://feeds.feedburner.com/pisp-flux">Flux RSS feed</a></li>
				<li><a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2090884&loc=en_US">Flux email updates</a></li>
				<li><a href="http://feeds.feedburner.com/pisp-updates">Site updates RSS feed</a></li>
				<li><a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2404641&loc=en_US">Site updates email updates</a></li>
			</ul>
		</div>
	</div>
</div>

Thanks! Any help much appreciated :D

web-design

3 Contributors
2 Replies
115 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by MidiMagic

blocblue 238 Posting Pro in Training

16 Years Ago

There seems to be a lot of info in your post, and unfortunately your website is no longer accessible, so I would suggest you try this first and repost the outcome, or fix your site, and I will try it myself.

The most common issue I've found with IE is when using the float property together with a margin. So, if you use float: left, together with a left margin of say 10px, IE 6 decides to double the margin width, so in this case it'd be 20px.

To fix this, add the property and value, display: inline. So any element which has the float property, together with a corresponding margin, add display: inline and it'll fix the margin settings.

Try this and repost the result if you can.

R.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

MidiMagic 579 Nearly a Senior Poster · Answer 1 · 2008-11-01T00:29:57+00:00

There is also a problem using width or height in the same style as nonzero margin, border, and/or padding. IE nests them in a different order, putting the surrounding styles inside the width, instead of outside as the standard requires.

The trick is to nest containers, separating the following into different containers:

1. width and height, or images of defined size.

2. margins, borders, and padding.

3. floats and clears.