Here is a low res screen shot of what's happening:


Here is a low res screen shot of how I want it to look (except with the resizer):


Here is the HTML:

<div id="container">
		<div id="header">		
                      <div class="moduletable-resizer">
			    <a href="index.php" title="Increase Size" onclick="changeFontSize(1); return false;"><img src="templates/moneytime/images/font_up.jpg" border="0" alt="Increase Font Size" title="Increase Font Size" width="28" height="15" /></a>
                            <a href="index.php" title="Decrease Font size" onclick="changeFontSize(-1); return false;"><img src="templates/moneytime/images/font_down.jpg" border="0" alt="Decrease Font Size" title="Decrease Font Size" width="28" height="15" /></a>
                            <a href="index.php" title="Reset Font Size to Default" onclick="revertStyles(); return false;"><img src="templates/moneytime/images/font_reset.jpg" border="0" alt="Reset Font Size" title="Reset Font Size" width="44" height="15" /></a> 		
                     </div>
				
                     <div class="moduletable-header">
			<img id="logo" src="http://www.webmaster-talk.com/images/header/logo.jpg" border="0" alt="Logo" title="" width="229" height="67" /> <p class="slogan"><em>Competitive Mortgages.&nbsp;&nbsp;&nbsp;&nbsp; Competitive Choices.</em></p><p>&nbsp;</p>		
                     </div>

	      </div>

Here is the CSS:

#container {
	text-align:left;
	width:780px;
	height: 1000px;
	background-color:#D2C888;
	margin: 0px auto 0px auto;
	padding:0px;
	border: 1px solid #000060;
}

#header {
	width:780px;
	height:200px;
	text-align:center;
	background-image: url(../images/header_pics.jpg);
	background-position: right;
	background-repeat: no-repeat;
}

#header .slogan {
	font: bold 9pt Georgia, "Times New Roman", Times, serif;
	color: white;
}

#header .moduletable-header {
	color: white;
	width: 380px;
	height: 200px;
	background: #000060 url(../images/bg_header.jpg) left repeat-x;
}

#header .moduletable-resizer {
	float: left;
}

#logo {
	margin: 50px auto 25px;
}

I'm using Joomla to power the site, but I can't figure out why the logo is shifting to the right everytime I publish the font resizer to the page.

Any help is greatly appreciated.

In case anyone is interested, I finally (after many hours) figured out a solution.

I put the #header .moduletable-resizer width: 100% and it worked.

Thanks anyways.

PS - Please, if that wasn't the correct thing to do, please let me know.

Correction...

Help is needed again! My solution worked in FF, but in IE, it looks like this:


Does anyone know what the bg gradient is dropping down??

Couldn't you absolutely position the resizer? It doesn't seem like it needs to adjust with the page flow, so setting the position as absolute would make the layout more solid by pulling it out of the page flow and not effecting other elements.

If your layout is centered (as opposed to left aligned), you could still absolutely position the resizer by adding position: relative to your container div.

When you float an element, it should have a width associated with it according to the W3C spec. That may be why it worked once you added the 100% width. It doesn't seem to need that much width though. How wide is the resizer? If you absolutely position it, you can probably drop the width from the css.

What do you mean the gradient bg is dropping down? It seems like there is a bg color assigned to the div containing the resizer. You mentioned you made the width 100%, which would explain why the brown is going across the entire top of the layout.

A link would be really helpful.

I don't have this on the net yet. It's just on my localhost.

Thanks for the advice. I just added position: absolute; and didn't define left or top and everything worked great!!! I tried position absolute before but when I defined left and right it didn't work.

Anyways... Thanks very much!

I would imagine that is defaulting to top: 0 and left: 0. Strange that didn't work for you before.

Glad I could help. You had great questions.