IE7 displays 3 column layout fine, but Firefox, Safari, & Opera do not!

Question

Marie S. 0 Newbie Poster

14 Years Ago

Can anyone figure out what I'm doing incorrectly? My 3 column layout displays fine in IE7, but not in the other browsers. The first column doesn't seem to recognize the header & moves up too far into the header. I've been learning CSS & HTMl from books & been making steady progress, but am not sure how to solve this problem.

web-design

3 Contributors
8 Replies
175 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by MidiMagic

All 8 Replies

omniuni 0 Newbie Poster

14 Years Ago

Hi, can you please link to the page, or provide code? Without it, I can't even guess what is going wrong. I would suspect that there is a coding error that is causing it to malfunction (appearing to work) in IE7, and standards compliant browsers are ignoring the bad code instead. Look for errors with the Firefox Web Developer toolbar.

omniuni 0 Newbie Poster

14 Years Ago

Can you post the HTML as well? I can reconstruct the page to see what's going on, but I need the complete code.

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.

Marie S. 0 Newbie Poster · Answer 1 · 2009-08-07T03:39:12+00:00

Hi:
Sorry for the code omission! Here's the css - any help would be greatly appreciated! Thanks!

body {
	margin: 0;
	padding: 0;
	background: url(c:/documents and settings/hp_owner/my documents/the shamanic vine website/images/shoppingcartbackground.jpg);
  	background-repeat: no-repeat;
	font-family: Times New Roman, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #E6FFE6;
}

#wrap {
	margin: 0 0;
	padding: 0px;
	max-width: 1200px;
	min-width: 600px:
}

h1 {
	text-align: center;
	letter-spacing: 1px;
	font-size: 1.4em;
}

h2 {
	letter-spacing: .75px;
	font-size: 1.2em;
}
h1, h2, h3, p, ol, ul {
	margin-top: 0;
}

h1, h2, h3 {
	font-family: "Times New Roman", "Trebuchet MS", Arial, Helvetica, sans-serif;
}

p, dl, blockquote {
	list-style: none;
}

ul {
	list-style: none;
}

a {
	color: #E6FFE6;
}

a:hover {
	text-decoration: underline;
  color: #E6FFE6;
}



/* Header */
#header {
  background: url("http://www.shamansvine.com/images/poweranimalheader.jpg");
  background-repeat: no-repeat;
}

/* menu across the top */
#menu {
	float: right;
}

#menu ul {
	margin: 0;
	padding: 0px 10px 0 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	float: right;
	width: 75px;
	height: 35px;
	margin: 167px 0 10px 2px;
	padding: 5px 0 0 0;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0px;
	font-size: .85em;
	font-weight: bold;
	color: #E6FFE6;
	border-left: 1px solid #E6FFE6;
}

#menu a:hover {
  text-decoration: underline;
  color: #E6FFE6;
}

/* Content */
#content {
  padding: 15px;
}

#colOne {
	float: left;
	width: 18%;
	padding: 30px 5px 10px 0px;
	font-weight: bold;
  	text-align: center;
	color: #570099;
}

#colTwo {
	float: left;
	width: 58%;
	padding: 1em 1em 1em 1em;
  	background: #e6ffe6;
	color: #00842B;
}

#colTwo h1 {
	font-size: 1.5em;
}

#colTwolarge {
	float: left;
	width: 78%;
	padding: 1em 1em 1em 1em;
  	background: #e6ffe6;
	color: #00842B;
}

#colThree {
	float: right;
	width: 18%;
	padding: 30px 5px 10px 0px;
	font-weight: bold;
	text-align: left;
}



/* Search */

#searchform {
	padding: 0px 10px 5px 0;
	text-align: right;
}

#searchform br {
	display: none;
}

#searchform input {
	color: #00842B;
	margin-bottom: 5px;
}

#searchform #s {
	width: 150px;
}

/* Footer */

#footer {
	border: 1px green;
	float: left;
	width: 100%;
	clear: both;
	text-align: center;
}

#footer p {
	margin: 0;
	text-align: center;
}

Marie S. 0 Newbie Poster · Answer 2 · 2009-08-08T03:19:51+00:00

Can you post the HTML as well? I can reconstruct the page to see what's going on, but I need the complete code.

Sorry! I'm new to posting on DaniWeb, learning what & how to do it. Here's the html - hope I'm doing this right!

<!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>Wicca Store Pagan Books Tarot Decks Crystals Reiki New Age The Shamanic Vine</title>
<meta name="keywords" content="wicca, pagan, metaphysical, occult, new age, newage, angels, auras, chakras, witchcraft, supplies, wiccan, incense, incense cones, incense sticks, jewelry, rings, bracelets, gifts, cauldron, candles, candle holder, dragons, fairy, wizard, pentacle, pendants, herbs, stones, gems, rocks, crystals, tumbled stones, crystal healing, generators, vogel crystal, quartz, lemurian seed, tibetan quartz, lithium quartz, phantom crystals, quartz clusters, pyramids, hearts, stars, sacred geometry, herkimer diamond, double-terminated, mineral inclusions, record-keepers, crystal balls, reiki, shaman, tarot, tarot deck, oracle, fortune telling, psychic, psychic readings, rune, runes, book, books, astrology, egyptian, scarab, ankh, lamps, spheres, fossils, essential oils, magic, magick, magickal, meditation music, sandalwood, aloeswood, agarwood, aromatherapy, diffusers, censors, censers, teeshirts, pendulums, organic herbs, wicca supplies, pagan supplies, occult supplies, indian, native american, sage, charcoal" />
<meta name="description" content="The Shamanic Vine is a metaphysical book store for all paths: Wicca, Pagan, Buddhist, Shamanic, New Age selection of titles, incense, candles, wiccan tools, statues, symbolic jewelry, gifts, ceremonial, ritual objects, tarot cards, crystals, wands, pendulums, philosophy, holistic" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
{
	margin: 0;
	padding: 0;
	background: url(c:/documents and settings/hp_owner/my documents/the shamanic vine website/images/shoppingcartbackground.jpg);
  	background-repeat: no-repeat;
	font-family: Times New Roman, Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #E6FFE6;
}
<!-- start header -->
<div id="header">
<p><a href="poweranimalheader.jpg">
<img border="0" src="http://www.shamansvine.com/images/poweranimalheader.jpg" alt="poweranimalheader" STYLE="position:absolute; top:0px; left:0px; z-index:-1" width="1200" height="328" /></a></p>
	
		<ul id="menu">
			<li><a href="index.html">Homepage</a></li>
			<li><a href="#">Online Shopping</a></li>
			<li><a href="Links.html">Links</a></li>
			<li><a href="About Us.html">About Us</a></li>
			<li><a href="Contact Us.html">Contact Us</a></li>
		</ul>

</div>
<!-- end header -->
<div id="wrap">

<!-- start page -->
<div id="content">
<div id="colOne">
		<h2>NEWSLETTER</h2>

			<p><a href="Newsletter.html">Quarterly Newsletter</a></p>
			<p><a href="Special Guest.html">Special Guest</a></p>
			<p><a href="Ongoing Groups.html">Ongoing Groups</a></p>
		
								

		<p><a href="Moving%20Moon.gif"><img border="0" src="http://www.shamansvine.com/images/Moving%20Moon.gif" align="middle" width="60" height="60" alt="moving moon" /></a></p>
		
		<p align="center" style="text-align:center"><font size="3" color="#E6FFE6"><b>THE SHAMANIC VINE'S BUSINESS HOURS ARE:</b></font></p>
    		<p align="center" style="text-align:center"><font size="3" color="#E6FFE6"><b>TUES. THRU 				SAT.&nbsp; 10AM-6PM</b></font></p>
		<p align="center" style="text-align:center"><font size="3" color="#E6FFE6"><b>CLOSED SUNDAY 				&amp; MONDAY</b></font></p>
		
			<h2>MONTHLY SPECIALS</h2>
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
		</div>
	<div id="colTwo">
		<p><a href="shamanicvinebldg.jpg"><img border="0" src="http://www.shamansvine.com/images/shamanicvinebldg.JPG" width="340" height="224" alt="shamanic vine building" align="left"/></a></p>

		<h1>Welcome to The Shamanic Vine, Where The Energy Is Always Abundant &amp; Positive!</h1>

<p align="center"><b>Do you have metaphysical questions that science cannot answer such as:</b></p>
	
<p align="center"><b>Who am I?</b></p>
<p align="center"><b>Why am I here?</b></p>
<p align="center"><b>What is the deeper purpose of my existence?</b></p>

<p>You're not alone!&nbsp;  These questions that have been on the minds of human beings since the beginning of time.&nbsp; The Shamanic Vine is a place to purchase tools such as metaphysical books, ceremonial objects, tarot cards, crystals, wands, pendulums, meditation music, candles, etc. to help you find your own path.</p>

<p>Our name - <b>The Shamanic Vine</b> - symbolizes spiritual growth.&nbsp;  <b>Shamanic</b> - like a shaman, a walker between the worlds, a link or bridge between this world and the next.&nbsp;  <b>Vine</b> - growing and climbing like a vine.  We seek out information that utilizes earth-honoring spiritual principles and cross-cultural shamanic traditions to activate deep holistic shifts in consciousness, perception and behavior.</p>

<p>There are elements of shamanism in Angel Studies, Aromatherapy, Astral Projection, Auras, Psychic Development, Crystals, Dreams, Energy Healing, Magic, Herbalism, Native American paths, etc., etc. &nbsp; Shamanism has existed since the beginning of time on every continent of the planet.&nbsp;  Shamans throughout various cultures have served the role of priest, magician, metaphysician, healer, herbalist, dream interpreter, and spiritual advisor.&nbsp;  The shaman mediates between the visible and the spirit worlds, and makes use of spirit helpers, with whom he or she communicates, all the while retaining control over his or her own consciousness.&nbsp;  Shamanism is used to restore balance and healing to both people and the planet we live in.&nbsp;  It is a way of perceiving life, nature and Spirit.&nbsp; The shamanistic world-view is animistic in essence - their view is that spirit is within everything.&nbsp; This also includes the invisible world and non-ordinary reality, a realm that contains the spirits of land, ancestors, animals, gods &amp; goddesses, sidhe and other various entities.</p>


<p>Our intention is to help you find your own spiritual connection, to live in a more balanced, heart-centered way within yourself, your family, and in your community. The goal is to develop your own spiritual practice that fits you as you change and grow, and bring you closer to understanding the nature of Spirit and your place in It.</p>
	</div>

	<div id="colThree">
		
		<p align="center" style="text-align:center"><font size="3" color="#E6FFE6"><b>3608 S. Burdick St.</b></font></p>
    		<p align="center" style="text-align:center"><font size="3" color="#E6FFE6"><b>Kalamazoo, MI 49001</b></font></p>
		

		<form id="searchform" method="get" action="#">
			<div>
				<input type="text" name="s" id="s" size="15" value="" />
						<br />
				<input type="submit" value="Search" />
			</div>
				</form>
					
		<p><!-- // Begin Current Moon Phase HTML (c) MoonConnection.com // --><div style="width:142px"><div style="padding:2px;background-color:#000000;border: 1px solid #000000"><div style="padding:15px;padding-bottom:5px;padding-top:11.3px;border: 1px solid #AFB2D8" align="center"><div style="padding-bottom:5.6px;color:#FFFFFF;font-family:arial,helvetica,sans-serif;font-size:11.4px;">CURRENT MOON</div><script language="JavaScript" type="text/javascript">var ccm_cfg = { pth:"http://www.moonmodule.com/cs/", fn:"ccm_v1.swf", lg:"en", hs:1, tf:"12hr", scs:1, df:"std", dfd:0, tc:"FFFFFF", bgc:"000000", mc:"000000", fw:104, fh:153.3, js:0, msp:0, u:"mc" }</script><script language="JavaScript" type="text/javascript" src="http://www.moonmodule.com/cs/ccm_fl.js"></script><div style="padding-top:5px" align="center"><a href="http://www.moonconnection.com/" target="mc_moon_ph" style="font-size:10px;font-family:arial,verdana,sans-serif;color:#7F7F7F;text-decoration:underline;background:#000000;border:none;"><span style="color:#7F7F7F">moon info</span></a></div></div></div></div><!-- // end moon phase HTML // --></p>
		</div>
	<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
	<p align="center" style="text-align:center"><b><font size="3" color="#E6FFE6">2008 All Rights Reserved. &nbsp;&nbsp;Design By The Shamanic Vine.</font></b></p> 
	
<p style="text-align: left"><a href="http://validator.w3.org/check?uri=referer"><img border="0"         src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
</div> 

</div><!--end wrap -->
</body>
</html>

omniuni 0 Newbie Poster · Answer 3 · 2009-08-08T05:08:16+00:00

OK, so... how is it supposed to look, exactly? I see a page with a header image, navigation, and three columns, etc. I suspect that there should be a background image or color on the page? Also, the first column seems to be too high up on the page. I think you need a bit of cleanup on the CSS front. If it's OK with you, I will write a simple 3 column layout and link you to the CSS?

Marie S. 0 Newbie Poster · Answer 4 · 2009-08-08T20:53:37+00:00

OK, so... how is it supposed to look, exactly? I see a page with a header image, navigation, and three columns, etc. I suspect that there should be a background image or color on the page? Also, the first column seems to be too high up on the page. I think you need a bit of cleanup on the CSS front. If it's OK with you, I will write a simple 3 column layout and link you to the CSS?

Hi:

The background image is in the body section of the css. Looking at the css page, I think I have the 3 column layout coded correctly, but am not sure. The first column shouldn't move up into the header. The other 2 columns are positioned properly. In looking at the html page, I think I have all the divs placed right. It probably does need some cleanup. If my website is viewed in Internet Explorer, it displays fine - www.shamansvine.com. Viewed in Firefox, Safari, or Opera the first column moves up into the header. I know that the different browsers are written differently, and so read the code according to their own rules, so I'm scratching my head trying to find a way to make the website view properly in all browsers. Any help you can give is greatly appreciated! Thanks!

omniuni 0 Newbie Poster · Answer 5 · 2009-08-08T22:26:18+00:00

Well, part of what you will want to do, is create a header div, a body div, and a footer div, and then place the columns relatively inside that area, with a clear-fix div below them. It's a bit tricky, but it's the only relatively standard way to do it right. What you're running in to is IE's broken box model, in other words, intuitively, your code is right, technically, it's not right. Other browsers are rendering it correctly, while IE renders it as you would first think it should. Unfortunately, this rendering also makes matters worse for more complex designs, hence the w3c's standard. I'll post some code later.

MidiMagic 579 Nearly a Senior Poster · Answer 6 · 2009-08-12T08:12:27+00:00

You can't reference an address on your own disk drive and expect that image to work when the page is uploaded. You have done this in your body css.

IE7 displays 3 column layout fine, but Firefox, Safari, & Opera do not!

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers