CSS - Swf Not Positioning Correctly?

Hello Gang!

First off, thank you for taking your time to help a noob.

Here is my problem:

With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section).

Can anyone spot why the pages render 2 different ways?

LINK 1
LINK 2

Thank you for your time.

I can hardly believe my eyes. Maybe I'm doing something wrong...

I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be.

Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF.

Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe...

<div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div>

When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!!

Hello everyone,

Thanks in advance for any help you can offer.

I have a single page for a site I'm creating located he

simplethoughts.com/test/index.html

The css file for the page is located he

simplethoughts.com/test/css/screen.css

The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why.

Thanks again for any help...it's extremely appreciated!

-Neil

Hi guys,

I finally re-jigged all my CSS somewhat along with my site laoy, i now have 3 columns, one of which displays under the other two :S

any ideas on what i've done here?

the page in question is:

http://wakefieldfhs.co.uk:8180/uPhoto/signup.jsp

Thanks

Hello, I am sure that the solution to my problem is obvious in many ways. I thought maybe a fresh set of eyes would help.

I have a two column site, the columns are constructed side by side using the css float parameter. I have a wrapper around all of it to center it, and divs for every element.
One of the last divs (containing an h2, but I'd rather use images)will not drop down and line up with other h2. They are both inside divs.
I followed several instructions on several websites, listed below, but I cannot get this div to sit right, meaning be under my images (using lightbox 2) and act as a delimiter for the next set of images

Web Site: (sample dot funky-penguin dot com)

CSS help garnered he (alistapart dot com/stories/practicalcss)

My xhtml and css 2.0 all validate, so I don't think that is the problem.
I hope I was specific enough.
Thank you in advance for all of your assistance.

Hi again,

I have an issue which is only appearing in FF.

I am trying to create a footer, but it is appearing under my header and inside my content area, instead of at the bottom. I think it may be something to do with the margins. This is the code for the footer:

PHP Code:
#footer_wrapper{
width: 780px;
height: 21px;
margin: 0 auto;
background-image: url('img/footer_bg.png');
background-repeat:repeat-x;}

#footer_left{
float:left;
padding-left: 10px;}

#footer_right{
float: right;
padding-right: 10px;} 





Any ideas?

I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet.

When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link.

It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?).

Heres a link to show you:

http://skyyfinancial.com/demo/menutest2.php

I put it all together and my list looks like this:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<div>
<ul id="nav">
	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
		
	</li>

	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
		<ul>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
		</ul>
	</li>
</ul>
</div></td>
  </tr>
  <tr>
    <td><div>
<ul id="nav2">
	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
		<ul>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
		</ul>
	</li>

	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
		
	</li>

	<!-- etc. -->

</ul>
</div></td>
  </tr>
  <tr>
    <td><div>
<ul id="nav3">
	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
	
	</li>

	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
		
	</li>

	<!-- etc. -->

</ul>
</div></td>
  </tr>
</table>

As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well.


Other questions I had:

Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive )


Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this?

css:
Code:

#menu, #menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:14px; color:#636363; 
	font-weight:bold;
}

#menu a {
	display: block;
	width: 275px;
}

#menu li {
	float: left;
	width: 275px;
}

#menu li ul {


	
	background-color:#FFFFFF;
	position: absolute;
	width: 200px;
	left: -999em;
}

#menu li:hover ul {
	left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
}

Javascript
Code:

sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Thanks for the help

I uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/.

I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time??

Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php
Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css

Please help!

Hi There,

Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here?

This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP.

HTML:
Code:

<body>
<div id="mainSiteHold">

	<div id="contentLeft"><p>&nbsp;</p></div>
	
	<div id="contentMid"><p>&nbsp;</p></div>
	
	<div id="contentRight"><p>&nbsp;</p></div>

</div>
</body>

CSS:
Code:

body { margin:0px; padding:0px; background-color:#ffffff; }

#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }

#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }

#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }

#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }

Thanks

I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong.

I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari.

Here is the link:
http://gregsgoods.com/seestore.php

In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it.

Here is the CSS code:
Code:

html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {
color: #005B9C;
}

a:hover {
color: #0B2444
}

img {
border: 0;
}

body {
	background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
	color: #ccc;
	font: normal 62.5% Tahoma,sans-serif;
}

p,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
	color: #005B9C;
	margin: 0 0 7px 0;
}

h2 {
	font: normal 1.3em Tahoma,sans-serif;
	margin-bottom: 1px;
	color: #005B9C;
	margin: 0;
}


.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

.container {
	position: absolute;
	left:50px; 
	top:188px;
	background-color: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 8px 8px;
	width: 780px;
}


.top {
	padding: 8px 8px 0;
}


.header {
	position: absolute;
	left:50px; 
	top:10px;
	background-color: #fff;
	font-size: 1.2em;
	height: 173px;
	margin: 0 auto;
	padding: 8px 8px 5px;
	width: 780px;
}
.header .left, .header .right {
	background-color: #000033;
	color: #fff;
	color: #FFF;
	height: 163px;	

}
.header .left {
	background: transparent url(/img/Top.jpg) top left repeat-x;
	border: 1px solid #7795BD;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 163px;
	width: 777px;
	text-align: left;	
	
}

.header .right div {
	padding-left: 16px;
	padding-top: 16px;
	font: normal 1.6em "Trebuchet MS",sans-serif;
}




.navigation {	
	background: #D9E1E5 url(/img/nav.jpg);
	border: 1px solid #7795BD;
	height: 23px;
}
.navigation a {
	background: transparent url(/img/nav.jpg) left top repeat-x;
	border-right: 1px solid #7795BD;
	color: #fff;
	display: block;
	float: left;
	font-size: 12px;
	font-family: Arial;
	font-weight: bold;
	line-height: 23px;
	text-decoration: none;
	padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom; 
color: #f1f1f1;
}


.main {
	border-top: 8px solid #FFF;
	background: url(/img/bgmain.jpg) repeat-y;
}


.sidenav {
        float: left;
	margin: 5px;
	width: 195px;
}
.sidenav h2 {
	color: #333300;
	font-size: 1em;
	font-weight: bold;
	line-height: 30px;
	margin: 5;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
	font-size: 1.1em;
	color: #333300;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background-color: #ebebeb;
	color: #654;	
}

/* content */
.content {
        float: right;
	margin: 5px;
	padding: 0 16px;
	width: 536px;
}
.content {
	color: #666;
	font-size: 1.0em;
	margin-bottom: 6px;
}


.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}



.footer {
	background: url(/img/bluefooter.jpg) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	line-height: 39px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}

devwebsites.com/sitedevs/

Anyway, FF3 and Safari show up fine. I used conditional comments to get rid of what Opera is showing, and to make it look like FF3. However since Opera is displaying this behavior I guess I need to figure out what the actual problem is. Any input on it?

Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox.

Site: www.measureoffaith.net
Stylesheet: www.measureoffaith.net/style.css

Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet.

Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well.

Thanks so much.

index.html w/ stripped content:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Measure of Faith on Aerie Peak
    </title>

<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="banner">

    </div>
    <div id="container">
      <div id="navigation">
      <!-- Start of Navigation Bar (NavigationBar2) -->
        <table id="NavigationBar2" border="0" cellspacing="0"
        cellpadding="0" nof=
        "NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F  YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
        width="140">
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton1) -->
              <a href="#" onmouseover=
              "F_roll('NavigationButton1',1)" onmouseout=
              "F_roll('NavigationButton1',0)"><img id=
              "NavigationButton1" name="NavigationButton1"
              height="30" width="140" src=
              "images/Home_Hbutton_on2.gif" onload=
              "F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
              border="0" alt="Home" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton2) -->
              <a href=
              "/eqdkp/viewnews.php"
              onmouseover="F_roll('NavigationButton2',1)"
              onmouseout="F_roll('NavigationButton2',0)"><img id=
              "NavigationButton2" name="NavigationButton2"
              height="30" width="140" src=
              "images/Raid_News_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
              border="0" alt="Raid News" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton3) -->
              <a href="charter.html" onmouseover=
              "F_roll('NavigationButton3',1)" onmouseout=
              "F_roll('NavigationButton3',0)"><img id=
              "NavigationButton3" name="NavigationButton3"
              height="30" width="140" src=
              "images/Charter_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
              border="0" alt="Charter" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton4) -->
              <a href=
              "roster.html"
              onmouseover="F_roll('NavigationButton4',1)"
              onmouseout="F_roll('NavigationButton4',0)"><img id=
              "NavigationButton4" name="NavigationButton4"
              height="30" width="140" src=
              "images/Roster_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
              border="0" alt="Roster" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton5) -->
              <a href=
              "/eqdkp/listmembers.php"
              onmouseover="F_roll('NavigationButton5',1)"
              onmouseout="F_roll('NavigationButton5',0)"><img id=
              "NavigationButton5" name="NavigationButton5"
              height="30" width="140" src=
              "images/DKP_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
              border="0" alt="DKP" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton6) -->
              <a href="/phpBB2/index.php"
              onmouseover="F_roll('NavigationButton6',1)"
              onmouseout="F_roll('NavigationButton6',0)"><img id=
              "NavigationButton6" name="NavigationButton6"
              height="30" width="140" src=
              "images/Forums_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
              border="0" alt="Forums" /></a>
            </td>
          </tr>
        </table>
      </div>

      <div id="content">
        <div class="newspost"><div class="wraptitle">
				<p class="subtitle">- I... AM... UNLEASHED!</p>
				<p class="thetitle">MAGTHERIDON DOWN</p></div>
          <div class="newsdate">
            28.04.2007 by <img src="images/icons/mar.png" />
          </div>
          <div class="newscontent">
            Magtheridon proved to be no match to the professional
            button clicking skills of MoF. Wiping a few times in
            order to fine tune the button clicking, we emerged
            with victorious with zero deaths and some bad loot.
          </div>
					<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
        </div>

...clipped content...

      </div><div style="clear: both;">
    </div>
    <div id="footer">
      &nbsp;
    </div>
  </body>
</html>

style.css: Code:

html,body { height: 100%; }

body{ 
 background: #000000 url('background-image.jpg') repeat-y;
 margin: 0;
 height: 100%;
}

.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}

.wraptitle{
float: left;
height: 79px;
}

p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}

p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}

.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}

.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}

p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}


a:link{
 text-decoration: none;
}

a:hover{
 text-decoration: underline;
}

a:visited{
 text-decoration: none;
}

a:active{
 text-decoration: none;
}

#banner{
 background-image: url('header-one.jpg');
 height: 200px;
 width: 943px;
 padding: 0;
}

h5.styling{
 color: #555555;
 font-family: trebuchet ms, tahoma;
 border: 0;
 padding: 8px; 
 margin: 0;
}

p.styling{
 color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 8px; 
 margin: 0;             
 text-align:justify;
}

td.styling{
 font-color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 0; 
 margin: 0;             
 text-align:justify;
}

html > body #navigation{
 background-image: url('left-runner.jpg');
 font-size: 0;
 float: left;
 width: 140px;
 min-height: 100%;
 padding: 0 0 0 4px;
 line-height: 0;
 border: 0;
 margin: 0;
}

html > body #content{
 background: #EDF2F5;
 float: right;
 width: 796px;
 min-height: 100%;
 padding: 0;
 border: 0;
 margin: 0;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}


#container{
 width: 940px;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
}

#footer{
 background-image: url('bottom-frame.jpg');
 width: 943px;
 height: 47px;
}