Member Avatar for genevieve92

I'm working on this site:
http://www.essenceofsoy.com/redesign/index2.html

and I'm having a few problems with getting the layout exactly right.

1) When the window is shrunk, there is a very unsightly white gap that can be seen on the right-hand side, where the header and footer don't continue to extend.

I would like to fix this, but can't figure out how.

2) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is on the bottom-half of the button.

3) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div. It looks fine in IE6, though.

If anyone can help me with any of the above problems, I would be so grateful!
I'm a newbie at this DIV/CSS thing, so bear with my messy code.
I can provide screenshots/code samples/etc. if needed.

Thanks again!

  • 3 Contributors
  • 4 Replies
  • 195 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for sbv


1) When the window is shrunk, there is a very unsightly white gap that can be seen on the right-hand side, where the header and footer don't continue to extend.

I would like to fix this, but can't figure out how.

2) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is on the bottom-half of the button.

3) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div. It looks fine in IE6, though.

If anyone can help me with any of the above problems, I would be so grateful!
I'm a newbie at this DIV/CSS thing, so bear with my messy code.
I can provide screenshots/code samples/etc. if needed.

Thanks again!

I think this is all about css issue. U need to give fixed values in for each item. as width, height, position etc.
It will be use full to solve your problem to any one if u provide your css here. ( just a suggestion)

Member Avatar for genevieve92

I think this is all about css issue. U need to give fixed values in for each item. as width, height, position etc.
It will be use full to solve your problem to any one if u provide your css here. ( just a suggestion)

Thank you, I will provide both my CSS and HTML then.
I managed to complete the fluidity of my site, and now whenever the window shrinks, so does everything else in my site (I've heard this is a much more desired result than fixed positions, is this true?).

Now all that remains are that I still can't get the pink and gray boxes centered in their line of the content div when viewed in IE. For Firefox, I used display: table but that doesn't really work in IE5, at least.

Also, I'm still having the rollover problem. Thank you for your response, though! I'll put my code up right away.

Member Avatar for genevieve92

Here is my HTML & CSS code combined. I apologize for the length and my messy code:

<html>
<head>
<title>Essence of Soy - Gourmet Candles & Fine Products</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js">
</script>
<![endif]-->

 
<!--[if IE]>
<style>
.parent	{
	margin-left: 15%;
	width: 100%;
	margin-right: 15%;
	}
</style>
<![endif]-->

<style>
* 	{
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
	}

body	{
	width: 100%
	background: #fff;
	text-align: center;
	}

.wrapper{
	margin: 0 auto;
	clear: both;
	display: table;
	}

.fr	{
	float: right;
	margin:	0;
	}

.fl	{
	float: left;
	}

h1	{
	background: url(images/logo.jpg) no-repeat;
	margin: 0;
	display:inline;
	float:left;
	overflow: hidden;
	width: 263px;
	height: 72px;
	}

h1 a	{
	margin: 0;
	display: inline;
	float: left;
	overflow: hidden;
	width: 263px;
	height: 72px;
	text-indent: -100em;
	}

#header {
	width: 100%;
	text-align: left;
	margin-top: 0;
	margin-left: 0;
	padding: 0;
	overflow: hidden;
	clear: both;
	padding-top: 5px;
	background: #fe79a4 url(../images/header.jpg) repeat-x;
	}

#header .main
	{
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	text-align: left;
	clear: both;
	overflow: hidden;
	}

#bubble	{
	position: absolute;	
	width: 60%;
	background: transparent;
	margin-left: 20%;
	margin-right: 20%;
	top: 5px;
	right: 0px;
	text-align: right;
	overflow: hidden;
	}

#menu	{
	text-align: left;
	width: 100%;
	clear: both;
	padding-bottom: 5px;
	padding-top: 5px;
	float: top;
	padding: 0;
	overflow: hidden;
	background: #e94a72 url(images/menu.jpg) repeat-x;
	}

#menuin	{
	margin-left: 200px;
	}

#menu ul
	{
	text-align: left;
	display: inline;
	margin: 0;
	padding: 0;
	}

#menu li
	{
	text-align: left;
	display: inline;
	list-style: none;
	margin-left: 30px;
	padding: 0;
	float: left;
	font-size: 150%;
	}

li.home a
	{
	text-align: left;
	background: url(images/homea.jpg);
	display: block;
	width: 50px;
	height: 30px;
	background-position: 0 0;
	text-indent: -999999px;
	overflow: hidden;
	}

li.home a:hover 
	{
	text-align: left;
	background: url(images/homea.jpg);
	background-position: -50px 0;
	}

li.about a
	{
	background: url(images/abouta.jpg);
	display: block;
	text-align: left;
	width: 50px;
	height: 30px;
	background-position: 0 0;
	text-indent: -999999px;
	overflow: hidden;
	}

li.about a:hover 
	{
	text-align: left;
	background: url(images/abouta.jpg);
	background-position: -50px 0;
	}

li.shop a
	{
	background: url(images/shopa.jpg);
	display: block;
	width: 50px;
	text-align: left;
	height: 30px;
	background-position: 0 0;
	text-indent: -999999px;
	overflow: hidden;
	margin-left: 5px;
	}
	

li.shop a:hover 
	{
	text-align: left;
	background: url(images/shopa.jpg);
	background-position: -50px 0;
	}

li.join a
	{
	background: url(images/joina.jpg);
	display: block;
	width: 50px;
	text-align: left;
	height: 30px;
	background-position: 0 0;
	text-indent: -999999px;
	overflow: hidden;
	}

li.join a:hover
	{
	text-align: left;
	background: url(images/joina.jpg);
	background-position: -50px 0;
	}

li.contact a
	{
	background: url(images/contacta.jpg);
	display: block;
	width: 70px;
	text-align: left;
	height: 30px;
	background-position: 0 0;
	text-indent: -999999px;
	overflow: hidden;
	}

li.contact a:hover
	{
	background: url(images/contacta.jpg);
	background-position: -70px 0;
	}

#trimt	{
	width: 100%;
	float: top;
	overflow: hidden;
	height: 23px;
	background: #fff url(images/trimtop.jpg) repeat-x;
	}

.contentwrap
	{
	width: 100%;
	text-align: center;
	}


#content{
	float: top;
	background: #fff;
	text-align: left;
	padding: 5px;
	width: 60%;
	margin: 0 auto;
	color: #989898;
	font-size: 13px;
	font-family: trebuchet ms, georgia, tahoma;
	line-height: 14px;
	}

.emc
	{
	font-weight: normal;
	font-size: 16px;
	color: #ff79a4;
	}
	


.quote	{
	padding: 0;
	line-height: 24px;
	font-family: georgia, times;
	font-size: 23px;
	width: 70%;
	color: #fff;
 	background: #ffb8ce;
	margin: 0 auto;
	}

.quoteblock
	{
	display:block;
	width: 70%;
	margin: 0 auto;
	}

.quoteblock *
	{
 	display:block;
 	height:1px;
 	overflow:hidden;
 	font-size:.01em;
 	background:#ffb8ce
	}

.quoteblock1
	{
	margin-left:3px;
	margin-right:3px;
  	padding-left:1px;
  	padding-right:1px;
  	border-left:1px solid #ffb8ce;
  	border-right:1px solid #ffb8ce;
  	background:#ffb8ce
	}

.quoteblock2
	{
  	margin-left:1px;
  	margin-right:1px;
  	padding-right:1px;
  	padding-left:1px;
  	border-left:1px solid #ffb8ce;
  	border-right:1px solid #ffb8ce;
  	background:#ffb8ce
	}

.quoteblock3
	{
	margin-left:1px;
  	margin-right:1px;
  	border-left:1px solid #ffb8ce;
  	border-right:1px solid #ffb8ce;
	}

.quoteblock4
	{
	border-left:1px solid #ffb8ce;
 	border-right:1px solid #ffb8ce
	}

.quoteblock5
	{
 	border-left:1px solid #ffb8ce;
  	border-right:1px solid #ffb8ce
	}

.emq
	{
	font-style: none;
	font-size: 32px;
	}

.quote i
	{
	float: right;
	}

#box	{
	background: #f0f0f0 url(images/info.jpg) no-repeat;
	width: 254px;
	height: 169px;
	overflow: hidden;
	margin: 25px;
	display: block;
	}

#boxentry
	{
	color: #636363;
	font-family: trebuchet ms, georgia, tahoma, sans;
	font-size: 12px;
	line-height: 14px;
	padding: 15px;
	width: 254px;
	height: 169px;
	overflow: hidden;
	}

#boxentry br
	{
	line-height: 10px;
	}


h5	{
	color: #5c3428;
	font-family: georgia, times, sans;
	font-weight: lighter;
	font-size: 22px;
	line-height: 14px;
	}	

	
#footer{
	position: absolute;
	width: 100%;
	height: 64px;
	background: #5c3428 url(images/trimbottom.jpg) repeat-x;
	clear: both;
	left: 0;
	padding: 0px;
	}

#spacer	{
	clear: both;
	margin: 0;
	bottom: 0;
	height: 3px;
	}

.fnav	{
	color: #fff;
	font-family: trebuchet ms, tahoma, verdana;
	font-size: 12px;
	float: left;
	line-height: 14px;
	}

.fcopy	{
	color: #fff;
	font-family: trebuchet ms, tahoma, verdana;
	font-size: 12px;
	width: 100%;
	padding: 0;
	line-height: 14px;
	text-align: right;
	float: left;
	}

/* ----------- Form ----------- */
.form
	{
	margin:0 auto;
	width:200px;
	padding:14px;
	}

/* ----------- style1 ----------- */
#style1	{
	border: 0;
	background:transparent;
	}

#style1 h1
	{
	font-size:13px;
	font-weight:bold;
	margin-bottom:8px;
	}

#style1 p{
	font-size:11px;
	color:#666666;
	margin-bottom:20px;
	border-bottom:solid 1px #b7ddf2;
	padding-bottom:10px;
	}

#style1 label
	{
	display:block;
	font-weight:bold;
	text-align:right;
	width:140px;
	float:left;
	}

#style1 .small
	{
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:140px;
	}

#style1 select
	{
	border: solid 1px #000;
	color: #000;
	opacity: .5;
	font-size: 11px;
	font-family: georgia;
	}

#style1 input
	{
	float:center;
	font-size:11px;
	padding:2px 2px;
	border:solid 1px #000;
	color: #000;
	width:200px;
	opacity: .5;
	font-family: georgia;
	margin:2px 0 0 2px;
	}

#style1 button
	{
	clear:both;
	float: right;
	margin-top: 5px;
	width:94px;
	height:21px;
	background:#494949 url(images/button.png) no-repeat;
	text-align:center;
	padding: 0;
	color:#fff;
	font-size:13px;
	font-weight: normal;
	}


#corner	{
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	z-index: 99;
	
	}
	
</style>
</head>
<body>

<!--TOP LAYOUT-->


<div id="header">

<div class="main">
<h1><a href="index.html">Essence of Soy</a></h1>
</div>

</div>

<div id="bubble">
<img src="images/sbubble.png">
</div>

<div id="corner"><a href="makeadifference.html"><img src="images/bcbanner.png"></a></div>

<div id="menu">
<div id="menuin">

<!-- BEGIN NAV-->

<ul>
	<li class="home"><a href="index2.html">Home</a></li>
	<li class="about"><a href="about.html">About</a></li>
	<li class="shop"><a href="shop.html">Shop</a></li>
	<li class="join"><a href="join.html">Join</a></li>
	<li class="contact"><a href="contact.html">Contact</a></li>

</ul>

<!--END NAV-->

</div>
</div>

<div id="trimt">
</div>

<!--END TOP LAYOUT-->
<div class="contentwrap">

<div id="content">

<div id="spacer">&nbsp;</div>
<div id="spacer">&nbsp;</div>

<!--[if IE]>
<div class="parent">
<![endif]-->
<div class="wrapper">

<div>
  <b class="quoteblock">
  <b class="quoteblock1"><b></b></b>
  <b class="quoteblock2"><b></b></b>
  <b class="quoteblock3"></b>
  <b class="quoteblock4"></b>
  <b class="quoteblock5"></b></b>

  <div class="quote">
"how far that little <span class="emq">candle</span> throws his beams! so &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="emq">shines</span> a good deed in a weary <span class="emq">world</span>." 
<br />

  </div>

  <b class="quoteblock">
  <b class="quoteblock5"></b>
  <b class="quoteblock4"></b>
  <b class="quoteblock3"></b>
  <b class="quoteblock2"><b></b></b>
  <b class="quoteblock1"><b></b></b></b>
</div>

</div>
<!--[if IE]>
</div>
<![endif]-->

<div id="spacer">&nbsp;</div>

<!--BEGIN CONTENT-->
<img src="images/welcome.jpg">
<p>
<img class="fr" src="images/candles.png">
..to <span class="emc">essenceofsoy.com</span> where you can find gourmet candles and quality service in one super, happy-go-lucky little bundle. Experience a world of <span class="emc">opportunity and happiness</span> self-created through <span class="emc">working at home</span> on your time, at your leisure. Please feel free to browse through these pages,where you can shop online, <span>quickly and conveniently</span>, and learn more aboutour company and why we provide the <span class="emc">very best</span> the candle industry has to offer. >> read more 

</p>
<!--END CONTENT-->

<div class="wrapper">

<div id="box" class="fl">
<div id="boxentry">
<h5>know what you need?</h5>
<br />
&nbsp;&nbsp;&nbsp;see that fancy box down there?
<br />go ahead and give it a click!

<p>
<div id="style1" class="form">
<form id="form" name="form" method="post" action="index.html">
<select>
<option>- - - please select a product - - -</option>

<option>--------------Candles--------------</option>
<option>Jar candles</option>
<option>Votives</option>
<option>Mia Melts</option>
<option>-----------Body Products---------</option>
<option>Bella Bars</option>
<option>Bella Wash</option>
<option>---------------Misc----------------</option>
<option>Car Fresheners</option>

</select>
<button type="submit">Find it!</button>
</form>
</div>
</p>

</div>
</div>


<div id="box" class="fl">
<div id="boxentry">
<h5>join the team</h5>
<br />
find out how you can work from home!

<br />&nbsp;&nbsp;sign up to get some free info on how.
<p>
<div id="style1" class="form">
<form id="form2" name="form" method="post" action="index.html">

<input type="text" name="name" id="name" value="Enter your name here" />

<input type="text" name="email" id="email" value="And a valid e-mail address" />

<button type="submit">Go, go, go!</button>
</form>
</div>
</p>

</div>
</div>

</div>

<div id="spacer">
</div>



</div>
</div>

<div id="footer">

<div class="fnav">
<p>
&nbsp;
</p>
<br />

</div>

<div class="fcopy">
Design by <u>issentia design</u>.
</div>

</div>

</body>
</html>
Member Avatar for MidiMagic

A few tips:

1. Never put size styles (width. height) in the same tag or stylesheet style with nonzero surrounding styles (margin, border, padding). This is guaranteed to create a compatibility problem between IE and Firefox (IE nests them in the wrong order). Instead, nest two tags, and apply the size styles to one, the surrounding styles to the other.

2. Don't use absolute positioning. IE and FF differ on how to interpret the positions. And different display resolutions mess up the positioning.

3. Rollover menus belong in the recycling bin. They are a stupid fad, and make navigation much harder for dyslexic people. It should be illegal to make something happen when the mouse just points at something.

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.