CSS - Banner Zone Added Shows Bad In Ff & Ie !

Hi there guys,

This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE.

So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it!

So I'm working on a website of mine that needs a varying amount of content boxes (divs with content in) per page.

The way I want them to display however, is the catch. So I'll explain what I want first, and then show what I've done at the moment.

What I want
I want them to display at around 10% from the bottom of the user's page. And be anchored to that point.
So no matter what size the browser window is, the content will be fairly similarly laid out (within reason).

SO. If a page needs only one content box (one div with content in), I want the bottom left corner of that div to be 10% up the users browser window from the bottom of the page.

BUT. Then if I want 2 divs of content on that page, I want the 1st div to be pushed up the page by the 2nd, and have the 2nd div's bottom left corner 10% up the user's page.

And then with the same pattern every time I add another div.

So to try and make sure you get it, I drew these.

On a page that needs 1 content box - http://img163.imageshack.us/img163/945/1div.jpg
On a page that needs 2 content boxes - http://img715.imageshack.us/img715/33/2divs.jpg
On a page that needs 3 content boxes - http://img693.imageshack.us/img693/1484/3divs.jpg

So what I've done
Is.. used a container div that is situated at that point of the page that I want the divs to align from.

But because I failed at trying to relatively position them, I just positioned them with absolute values. Which is far too rigid for what I need.

At the moment it has 3 divs to show the process I want. The 1st content div obviously then has to stay at the bottom, so I need to move my content to other divs when I want to add something below an existing one.

Another problem/requirement is that if one of the divs has more lines of content than the other, big inconsistent gaps emerge. So depending on the size of the div, it would need to get pushed further, or less, up the page.

HTML
Code:

<div id="content-container">
<div id="content1">
abc
</div>
<div id="content2">
def
</div>
<div id="content3">
ghi
</div>
</div>

CSS
Code:

#content-container {
	width: 1px;
	height: 1px;
	position: absolute;
	bottom: 10%;
	left: 10%;
}

#content1 {
	width: 600px;
	height: 10px;
	position: absolute;
	bottom: 110px;
}

#content2 {
	width: 600px;
	height: 10px;
	position: absolute;
	bottom: 250px;
}

#content3 {
	width: 600px;
	height: 10px;
	position: absolute;
	bottom: 390px;
}

Basically I want it to be flexible, rather than rigid.

Which I had hoped could be fixed with relative positioning, but I couldnt manage that.

Hi there,

I'm making a weblog layout made in php all the articles are going to be stored on the center of the screen, the code I used for this is width:50%, but how do I make the css code so that the center page color will be all the way at the bottom no matter what size of a window is used?

Thanks in advanced!

Hi,

Here is the page I am having trouble with:

http://mccalebconstruction.anchorwave.com/slices/index2.php

If you view source, the CSS should be in the file as well.

It is very basic because I have stripped out everything else on the page to make it simpler to identify the problem. But I don't know what the problem is! In Firefox it looks fine. In IE there is a line on the left of the content area. The line is caused by the background-image of #content. I don't understand why it's showing up, though, since the images are supposed to be floating left (thus, covering the background image)... but it appears they aren't floating ALL THE WAY to the left, there is a gap. I made sure all the padding and stuff was 0 but that doesn't help.

Thanks in advance,

~wz

Hi there,

someone please help me... i am pulling my hair out! hahah
so i am trying to custom code an email template for use in mailchimp - however it looks okay in design preview in dreamweaver but when i preview in firefox or take it into mailchimp there are extra spaces above and below the images not specified in the code. Please help../. urgent job!

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"....">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample Email Template From MailChimp</title>
<style type="text/css" media="screen">
/**
* @tab Page
* @section background color
* @tip Choose a color for your HTML email's background. You might choose one to match your company's branding.
* @theme page
*/
body {
/*@editable*/ background-color: #ffe4a8;
text-align:center;
}

/**
* @tab Page
* @section border
* @tip Add a border to help your template content stand out from your email's background.
*/
#layout {
/*@editable*/ border: 0px solid #999999;
/*@editable*/ background:#ffffff;
text-align:left;
height: auto;
width: 780px;

}
/**
* @tab Header
* @section header bar
* @tip Choose a set of colors that look good with the colors of your logo image or text header.
*/
#header {
/*@editable*/ background-color: #FFE4A8;
/*@editable*/ border-top: 0px none #333333;
/*@editable*/ border-bottom: 0px none #ffffff;
/*@editable*/ padding: 0px;
/*@editable*/ color: #333333;
/*@editable*/ font-size: 30px;
/*@editable*/ font-family: Georgia;
/*@editable*/ font-weight: normal;
/*@editable*/ text-align: left;
margin: 0px;
height: 156px;
width: 780px;
}

/**
* @tab Body
* @section default text
* @tip This is the default text style for the body of your email.
* @theme content
*/
#content {
/*@editable*/ font-size: 13px;
/*@editable*/ color: #333333;
/*@editable*/ font-style: normal;
/*@editable*/ font-weight: normal;
/*@editable*/ font-family: Helvetica;
/*@editable*/ line-height: 1.25em;
text-align: justify;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}

/**
* @tab Body
* @section title style
* @tip Titles and headlines in your message body. Make them big and easy to read.
* @theme title
*/
.primary-heading {
/*@editable*/ font-size: 28px;
/*@editable*/ font-weight: bold;
/*@editable*/ color: #532e2a;
/*@editable*/ font-family: Georgia;
/*@editable*/ line-height: 150%;
/*@editable*/ margin: 25px 0 0 0;
}

/**
* @tab Body
* @section subtitle style
* @tip This is the byline text that appears immediately underneath your titles/headlines.
* @theme subtitle
*/
.secondary-heading {
/*@editable*/ font-size: 20px;
/*@editable*/ font-weight: bold;
/*@editable*/ color: #000000;
/*@editable*/ font-style: normal;
/*@editable*/ font-family: Georgia;
/*@editable*/ margin: 25px 0 5px 0;
text-align: justify;
}

/**
* @tab Footer
* @section footer
* @tip You might give your footer a light background color and separate it with a top border
* @theme footer
*/
#footer {
/*@editable*/ background-color: #FFE4A8;
/*@editable*/ border-top: 0px none #ffffff;
/*@editable*/ padding: 0px;
/*@editable*/ font-size: 10px;
/*@editable*/ color: #333333;
/*@editable*/ line-height: 100%;
/*@editable*/ font-family: Verdana;
}

/**
* @tab Footer
* @section link style
* @tip Specify a color for your footer hyperlinks.
* @theme link_footer
*/
#footer a {
/*@editable*/ text-decoration: underline;
/*@editable*/ font-weight: normal;
}

/**
* @tab Page
* @section link style
* @tip Specify a color for all the hyperlinks in your email.
* @theme link
*/
a, a:link, a:visited {
/*@editable*/ color: #800000;
/*@editable*/ text-decoration: underline;
/*@editable*/ font-weight: normal;
}
a:link {
color: #EE770F;
}
a:visited {
color: #C91C00;
}
a:active {
color: #EE770F;
}
</style>
</head>
<body> <center>
<table id="layout"mc:edit="layout" border="0" cellspacing="0" cellpadding="0" width="780">
<tr>
<td id="header" mc:edit="header" width="780" height="156">

<!-- NOTE: This image would trigger the display of a placeholder block with edit links when shown in the MailChimp editor interface -->
<img src="...." alt="" width="780" height="129" />
<img src="...." alt="" width="524" height="27" /><img src="...." alt="" width="86" height="27" /><img src="...." alt="" width="101" height="27" /><img src="...." alt="" width="69" height="27" />

</td>
</tr>

<tr>
<td id="content" mc:edit="content">
<h1 class="primary-heading">Primary Heading</h1>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>

<h2 class="secondary-heading">Secondary Heading</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br />
</p>
</td>
</tr>

<tr>
<td id="footer" mc:edit="footer">
<p align="center"> <img src="...." alt="" width="780" height="28" />

<a href="*|ARCHIVE|*" class="adminText"><br />
<br />
view email in browser</a> | <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend </a></p>
<p align="center">Copyright (C) 2009 *|LIST:COMPANY|* All rights reserved.<br />
</p>


</td>
</tr>
</table></center>
</body>
</html>

[CODE]
conception is offline Reply With Quote

I have the following code in my style sheet:

body
{
background: url('../../docks/images/dock2_fade.jpg') no-repeat fixed center 35%;
}

which displays correctly. However, the pages using this style sheet are displayed in a frame and when I scroll the page any text blurs until it is unreadable.

If I display the pages outside of the frame then it all works perfectly.

Can any one shed any light as to why this is happening?

Jeni

There is a big amount of space that shows up in firefox and not IE on a page I am trying to develop.

temporary site <--- fixed. in a state of constant change.

The css is layout.css .

I have had two people try to design a template in photoshop for me but they are dragging their butts. I decided to just start without them with a simple template. I know there are problems. I probably coded things wrong and not efficient and the image is also too big. It also doesn't validate if anyone checks that(it is because of my transparencies).

I really would like to know what is causing the extra space in firefox. If you have comments on other stuff feel free to comment because this is my first attempt at a css template. Also if anyone has an idea for a design feel free to draw something up.

On my new design: http://codymays.net/~private_ftp/theed
The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers.

I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason.

Any ideas/suggestions on what to do here would be appreciated.

Thanks,
Cody

Hey Guys,

Im kinda stuck, my site here -beta.thenpcs.com just displays the backround in IE6. The CSS validates so im not sure what im doing wrong :/

Thanks!

a site im working on .. (apparently I cant post URLs....)

it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end.


works fine in Firefox. I validated with transitional.

In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost.

Quote:
#bg
{
position: absolute;
top: 0px;
left: 0px;
background: #fff url('images/bg.png') no-repeat;
width: 747px;
height: 264px;
}

#wrapper
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url('images/abg.png') repeat-y;
}



that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.)

any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to.

thanks in advance.

Hi, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com

If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text...

I am very frustrated, please help me.

Here's the code for the HTML:

Code:

<!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>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
	text-align: center;
	margin: 0;
	background-color: #9e0b0f;
	background-image: url(images/back.jpg);
	background-repeat: repeat-x;
}
</style>

</head>

<body>
<div class="div-header"></div>
<div class="div-middle">
<div class="div-logo">

    <p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p>
    <p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br />
        <img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br />
        <img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br />
        <img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p>
  </div>
  <div class="div-text">
    <p>The Outsourcing Company is your business partner for:</p>

    <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br />

    <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p>
    <p>We have two goals:</p>
    <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br />
      <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p>
  </div>

</div>
<div class="div-footer"></div>
</body>
</html>

And this is the CSS:

Code:

.div-header {
	background-image: url(images/header-blank.jpg);
	background-repeat: no-repeat;
	margin: auto;
	height: 164px;
	width: 800px;
}
.div-footer {
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	margin: auto;
	height: 48px;
	width: 800px;
}
.div-logo {
	height: 55px;
	width: 193px;
	margin-left: 40px;
	text-align: right;
	float: left;
	margin-top: -120px;
}
.div-text {
	float: left;
	text-align: left;
	width: 485px;
	padding-left: 30px;
	font-family: "Myriad Pro";
	font-size: 13px;
	margin-top: -108px;
}
.div-middle {
	background-image: url(images/middle.jpg);
	background-repeat: repeat-y;
	margin: auto;
	width: 800px;
	height: 1000px;
}

Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html

Any help pointing me in the right direction will earn you a friend for life.

Edit: Problem solved

This topic can be locked or deleted. I tried everything and figured out the problem

On my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.!

I have the following code which works fine in IE but not in firefox.

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr><td></td></tr>
</table>

IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table.