CSS - $%^*$%*$ Frustration Level Mounting Higher With Ie Woes

Firstly I am a noob to design and code and am attempting to self teach so if this is in the wrong section I do appologize.

I am attempting to create a designed content box and nearly have it working except I have one issue that has for the past week been causing the vain in my temple to pulsate rapidly!

The content box has a total of 10 image boxes around the center text box. The problem is that the 2 side boxes that have a background image will not tile continuously as is intended when the text expands past a certain point as it lengthens.

Here is the code that I have also I am using Dreamweaver CS3. If anyone could help me solve this you could very well be saving a life! I had images however apparently I am not able to use em so I hope its ok to pull a sneaky

worldwideweb.axiomfiles.com/Files/213668/4junk2.png - shows the different cells

worldwideweb.axiomfiles.com/Files/213668/4junk.png - shows the content box on the web after Ive lengthened the text area (which is a must on certain pgs and can be quite long)

My Thanks in advance. Dee

===============================

<table border=0 cellpadding=0 cellspacing=0 align="center" width="781">
<tr valign="bottom">
<td width="86" height="100"><img src=".../Files/213668/4topleftcentercorner.png" width="86" height="100"></td>

<td height="74" valign="middle" background=".../Files/213668/4topcenter.png" bgcolor="#1C1C1E" alt="">
<div align="left">
<table border=0 cellpadding=0 cellspacing=0 width="291">
<tr valign="top">
<td width="291" height="50" align="center">
<div align="left"> $block[title]</div></td>
</tr>
</table>
</div></td>

<td width="46" height="100"><img src=".../Files/213668/4toprightcentercorner.png" width="86" height="100"></td>
</tr>

<tr align="left" valign="top">
<td height="100"><img src="...../Files/213668/4topleftcentercorner2.png" width="86" height="106" align="top"></td>
<td height="100" rowspan="2" bgcolor="#1C1C1E" alt="">
<left>
<font size=2>
<left>
<table>
<tbody>
<tr>
<td width= 700 align="left">
<p align=left><font size=2>
$block[content]</td></tr></tbody>
</table></td>
<td height="100" alt=""><img src="...../Files/213668/4toprightcentercorner2.png" width="86" height="106" align="top"></td>
</tr>
<tr>
<td width="86" height="900" background="..../Files/213668/4leftsidecenter2.png"></td>
<td width="86" background="..../Files/213668/3maintextbotrightcorner2.png" alt=""></td>
</tr>
<tr valign="bottom">
<td width="86" height="82"><img src="...../Files/213668/4botleftcentercorner.png" width="86" height="82"></td>
<td height="80" background="http..../Files/213668/4botcenter.png" alt=""></td>
<td width="86"><img src="..../Files/213668/4botrightcentercorner.png" width="86" height="82"></td>
</tr></table>
<p><BR><br><BR>

At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox.

See he
www.djoj.net/test/indexwierd.html
Css: (Look at the way bottom of the CSS. The last 3 styles)
www.djoj.net/test/styles2.css

So I changed my div's to span's and wrapped them in one div labled "bottom" Now look...

www.djoj.net/test/index.html
Css: (once again, at the bottom)
www.djoj.net/test/styles.css

How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning.

Thank you in advance!

~B

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.

Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers?

If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high.

The HTML and CSS validate with no errors on the W3C validators.

I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery.

I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference.

I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there.

I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement.

I just need to know if I am wasting my time trying to troubleshoot something that is not correctable.

Thank you in advance for your time.

ok I've been playing with divs and trying to get them working well, but no matter what I do I can never get any site I try and create with divs looking as good as I could do with tables. I've just grown up using tables, and am irritated that that's the way it was because I would like to be using divs. I posted a thread earlier and got some good help, but have since decided on using a different design and can't quite get it the way I want it. so, this is a big ask, but could someone 'convert' this table based site to something that looks the same using divs so I try and relate how divs work to how tables work a bit better? thank you very very much to anyone that can.

html
Code:

<html>
<head>
<style>
	@import url(template.css);
</style>
</head>
<body>
<table id='main' cellspacing='0'>
  <tr>
    <td id='logobox'>
      logo
    </td>
    <td id='menu'>
      menu
    </td>
  </tr>

  <tr>
    <td id='content' colspan='2'>
      content
    </td>
  </tr>

  <tr>
    <td id='footer' colspan='2'>
      footer
    </td>
  </tr>
</table>
</body>
</html>

css
Code:

body, html
{
	height: 100%;
	background-color: #fff;
	margin: 0px;
}

td
{
	border: 1px solid #000;
}

table#main
{
	width: 60%;
	height: 100%;
	margin: 0px auto;
	border: 1px solid #000;
}

td#logobox
{
	width: 80px;
	height: 80px;
}

td#menu
{

}

td#content
{
	columnspan: 2;
}

td#footer
{
	height: 1%;
}

I am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far:
Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	
	<head>
	
		<title><?php echo $title_page; ?></title>
		
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
		
		<link rel="stylesheet" type="text/css" href="site_files/style/web.css" />
		
		<link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" />
		
		<script type="text/javascript" src="site_files/ie_drop.js"></script>
		
	</head>
	
	<body>
		
		<div id="header">
			<p>NAVPACMETOCCEN San Diego Operational Home Page</p>
		</div>
		
		<div id="info">
			<p>This page will be down at 1100 GMT on 20 June 2005.  Click <a href="site_files/php/status.html">here</a> for more information.</p>
		</div>
		
		
		<div id="menu">
			<ul id="nav">
		
				<li><a href="index.php">Home Page</a></li>
				
				<li>Support
					<ul>
						<li><a href="site_files/php/a.html">Ship Specific</a></li>
						<li><a href="site_files/php/a.html">Unit Specific</a></li>
						<li><a href="site_files/php/a.html">Detachment</a></li>
						<li><a href="site_files/php/a.html">Mobile Env. Team</a></li>
						<li><a href="site_files/php/a.html">Coast Guard</a></li>
					</ul>
				</li>

				<li>Satellite
					<ul>
						<li><a href="site_files/php/a.html">Infrared</a></li>
						<li><a href="site_files/php/a.html">Visual</a></li>
						<li><a href="site_files/php/a.html">Water Vapor</a></li>
						<li><a href="site_files/php/a.html">Lightning</a></li>
						<li><a href="site_files/php/a.html">Analysis</a></li>
					</ul>
				</li>
				
				<li>Products
					<ul>
						<li><a href="site_files/php/a.html">Warnings</a></li>
						<li><a href="site_files/php/a.html">Forecasts</a></li>
					</ul>
				</li>
				
				<li>Aviation 
					<ul>
						<li><a href="site_files/php/a.html">Products</a></li>
						<li><a href="site_files/php/a.html">Contact Info.</a></li>
						<li><a href="site_files/php/a.html">OBS/TAFS</a></li>
						<li><a href="site_files/php/a.html">Aviation Links</a></li>
					</ul>
				</li>

				<li><a href="site_files/php/links.html">Links</a></li>

			</ul>
		</div>
		
				<div id="leftside">
		
			<p class="leftmenu"><a href="http://www.navy.com">Navy Jobs</a></p>
			
			<p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p>
			
			<p class="leftmenu"><a href="http://www.navy.mil">U.S. Navy Website</a></p>
			
			<p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p>
			
			<p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p>
			
		</div>

	</body>
	
</html>

And here is the style sheet:

Code:

/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */


a:link { /* This is the link standard color*/
	color: #000000; /*black*/
	}
a:visited { /* This is the color of an already visited link*/
	color: #800080;/*purple*/
	}

a:hover {/* This is the color your link will take when you move your mouse over it*/
	color: #FF0000;/*red*/
	text-decoration: none;
	}
	
a:active {/* This is the color and effect when you physically click on the link*/
	color: #008080;  /*teal*/
	}

a { /*This tells the browser not to underline any links */
	text-decoration: none;  
	}


/* This begins the header and the information notice portion */

#header {
	margin: -14px -8px 0px -8px;
	padding: 10px;
	height: auto;
	background: #000060;
	}

#header p {
	margin: 0;
	height: auto;
	color: #FFFF1B;
	text-align: center;
	font: small-caps 24px verdana, san-serif, serif;
	}

#info {
	margin: -1px -8px 0px -8px;
	padding: 1px;
	height: auto;
	}

#info p {
	margin: 0;
	height: auto;
	color: #0000FF;
	background: #FFFFFF;
	text-align: center;
	font: bold 12px arial, san-serif, serif;
	}

/* This ends the header and the information notice portion */





/* This begins the Drop-down menu portion*/

#menu { /* Top-Right-Bottom-Left */
	margin: 0 0 0 145px;
	padding: 0;
	width: auto;
	font: small-caps bold 12px verdana, san-serif, serif;
	}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	}

li { /* all list items */
	float: left;
	position: relative;
	width: 125px;
	}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 14px;
	left: 0;
	}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
	}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
	}
	
/* This ends the drop-down menu portion */	




/* This begins the left-side menu portion */
	
#leftside {
	margin: 100px 0px 0px -8px;
	width: 115px;
	color: #000000;
	font: small-caps 12px arial, san-serif, serif;
	}
	
.leftmenu {
	margin: 5px 0 2px 0;
	height: 15px;
	background: #DDEEFF;	
	}
	
#pkinotice {
	margin: 0px 50px 0px 125px;
	font: bold 12px arial, san-serif, serif;
	}
	
.pki {
	border: 2px solid #FF0000;

As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering.

If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help.



Many thanks...

Bryan

I'm having trouble getting my background to render for my site.

When I write the code in the HTML ex.
<body background="images/currentbgimage.jpg">
it brings up the image fine. This would suffice if I could tell the image not to repeat. But you can't to my knowledge in the body tag.

The image won't display if I write it in the CSS though. ex.
body {background-image: url('images/currentbgimage.jpg')}
or
body {background: url('images/currentbgimage.jpg')}

I also tried it with the JPG in the folder with the HTML code, but to no avail.

Any help will be appreciated.

Skolar

Hi.
K, the site (thus far) looks great in IE, as the CSS is functioning perfectly. However, when checked in FF, it pretty well ignores the CSS for the body. I"ve undoubtedly missed somethin', just don't know what it is.

Thanks

here's the css;


Code:

.borders {
	border: 1px solid #666666;
	text-align:center;
}

}
.text {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:left;
}

}
.listtext {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:left;
}


table.menu {
border:1px solid #999999;
background:#CCCCCC;
}
table.menu a:link, table.menu a:visited {
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;
}
table.menu a:active, table.menu a:hover {
color:#CCCCCC;
background:#006600;
}


table.menu a {
	width:144px;
	display:block;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#006600;
	text-decoration:none;
	padding: 2px 2px;
 } 

and here's the HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kyrtsakas Law - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Kyrtsakas Law Office - Title Insurance from an experienced Real Estate Lawyer offers the best protection for your investment">
<meta name="keywords" content="Kyrtsakas, Law, Law Office, Lawyer, real estate, estate, will, title, Windsor, purchases, mortgages, power of attorney, attorney, CAW">
<link href="kyrtsakas_styles.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" bgcolor="#666666">
	
<table width="640" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" class="menu">
  <tr valign="top">
			<td align="center" width="640" colspan="6">
				<img src="images/Kyrtsakas_header.jpg" alt="Kyrtsakas Law Office">
			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">&nbsp;
				
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/index.htm">Home</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/profile.htm">Profile</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/tools.htm">Online Tools</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/contact.htm">Contact</a>
			</td>
			<td class="borders" width="106" colspan="1">&nbsp;
				
			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">&nbsp;
				
			</td>

			<td class="borders" width="640" colspan="4">
				<div class="text"><br>
					Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
					<b>Christos Kyrtsakas</b>, <b>LL.B.</b> specializes in <b>Real Estate Law, Title Insurance, Purchases, Sales, Mortgages,</b> and readily welcomes <b>CAW Plans</b>.<br><br>
					Call Chris today at (519)-974-6303, or drop by the office, located at 5655 Tecumseh Road East (across from the Fire Station), Windsor, ON.<br><br>
					"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
					
				</div>		
			</td>
			
    		<td class="borders" width="106" colspan="1">&nbsp;
				 
			</td>

		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">&nbsp;
				
			</td>

			<td class="borders" width="640" colspan="4">&nbsp;
						
			</td>
			
    		<td class="borders" width="106" colspan="1">&nbsp;
				 
			</td>

		</tr>

	</table>
</body>
</html>

Thank you!

I'm working on reworking my flash site into a CSS/HTML site. Tired of dealing with flash.

Anyways....I am working on this page currently and am having trouble getting 3 divs to line up properly in IE. They look great in Firefox!

Take a look and let me know if you have any ideas. Any help is much appreciated.

Here's the link www .crealities.com/2008/inspiration.htm

Hey, all!

I'm having a seemingly simple problem... and I'd really appreciate if you guys could help me out! I have no idea how to do what I want done, but I know it's possible.

I want to give every <tr> in <table class="forumList"> a 'border-bottom: 1px solid #000;' style.... except for the last <tr>. HOWEVER, if a new table is created, I want it to start showing the border-bottom again... until the last <tr> in the table. How would I go about doing this?

Hi

I am having a nightmare trying to get my horizontal navigation items to fill the width of my page and looking the same in IE and FF.

Here is the page http://www.designhomemanagement.com/new/

You will see that in IE the spacing is different.

They need to fill the width of the design (760px)

Please someone help me!

Thanks

Please look at these two pages -

www dot aamco-houston dot com

www dot aamco-houston dot com/warranties.asp

On the second page, in IE9, the navigation gets broken and put on two lines. In IE7, IE8, Firefox,etc. it looks fine. Can someone give me a workaround perhaps? Thanks. Tom

Hi. I've been trying to add some basic CSS to my forums. Basically it's just this:

Code:

<div style="float:left;width:24%;">
</div>

<br />

<div style="float:left;width:24%;">
</div>

<div style="float:right;width:74%;">
</div>

It works fine with just the first and last div. But it won't work with the middle div there. I dunno what CSS to use.

Edit: I can understand why it's doing that, add left | at 24%, add another | at 24% beside it for || but the last | is 74% and won't fit so it goes on a new line. Then the second | stretches to 74% to fit the | at 74% below it. Hmm, might revert to tables.

I'm having serious problems with the Peekaboo bug in IE. At least I think its that - I've tried all the fixes listed on positioniseverything and none are fixing it...

http://ucy.sitemakers.com/courses.php

I've got a three column layout taken from alistaparts Holy Grail layout which I've had working on many other sites with no problems, but I have added another two column layout directly above the three column one in this case.

The problem im having is a jumping div element, the left column. When you click on the Courses link the element is in the centre of the page but moving the mouse around the main menu items will make it jump back into place. On page refresh the column is in the right place. Wierdly hovering over the link in the centre column doesnt make the offending div jump back like I would have expected.

Taking out the following IE hack from the CSS:
*html #cc_l { left:22em;}
Makes the div appear in the correct place when clicking on the Courses link, until I hover over the menu again - then it jumps off the left of the page!

This is doing my nut in, anyone have any ideas?