HTML - Rendering Footer In Safari

Hi All,

I need help as fast as possible for a non profit which I have co-founded. I am a native linux/firefox user, one of the other members had told me that there is an issue in IE with our website but hadn't really told me how bad it was. I checked it out today and it is HORRIBLE. We are sending out a newsletter in the next week which will probably significantly increase traffic to our website so getting it solved is crucial. I can provide any code that I have worked on in order to find help.

the website is www.cleaneducation.org

the website works fine in Firefox in Windows/Linux and Mac but IE does not work. Please visit the site using firefox and IE to see what I mean. I'm in a bit of panic mode over this Thank you much

Two of the cells seems to be rendering backwards. Why is that? I'm just getting started w/ html, browsing the Jalfrezi tutorial site for tables (see merging/combining cells), and found this odd example.

Code:

<TABLE BORDER=1>
	<TR>
		<TH ROWSPAN=2></TH>
		<TH COLSPAN=2>Rating</TH>
	</TR>
	<TR>
		<TH>Sad</TH>
		<TH>Cool</TH>
	</TR>
	<TR>
		<TH ROWSPAN=2>Artist</TH>
		<TD>Belle & Sebastian</TD>
		<TD>Michael Bolton</TD>
	</TR>
	<TR>
		<TD>Bentley Rhythm Ace</TD>
		<TD>Mariah Carey</TD>
	</TR>
</TABLE>

It renders sad/cool flipped. Shouldn't cool be to the left of sad because it is declared before it?

Thanks.

Anyone else come across problems with table rendering in firefox? It seems to happen with larger tables, say a table with 30+ cells for a calendar. Sometimes firefox will render extra cells and throw everything off. The code is fine, this will happen randomly in different locations. Sometimes a refresh will fix the issue, sometimes the refresh will just move the issue to another location.

I've noticed that display:inline-table; fixes the problem for firefox, but in other browsers like opera display:inline-table; will get rid of margins (which I need).

Anyone know anything about this?

My new website MoveBR.com isn't rendering correctly in Firefox, but it seems to be working fine in IE. Specifically the picture on the left is messing up the footer. Just the page I've linked to though...it's a test page to get this working on others. It seems to do this whether the picture is inside the content or in its own div.

And if anyone is using Safari, I'd appreciate it if you could tell me how it looks there too.

I am having a problem in FF and IE when resizing the screen on this site:-

http://www.parentk12.com/wnp/

The two right hand divs drop off when the screen size is reduced. This does not happen in Opera. I realise that Opera is the most CSS standards compliant browser but I'm fairly new to this game and dont know how to work the CSS magic to fix the problem in FF and IE.

The pages all validate so I dont know what else I should do. Any help would be GREATLY appreciated.

Best Regards

CS

I am having an IE6 rendering error for http://cyanocide.com
The layout is the way I want it in firefox and IE7.
I am willing to change my CSS as long as I can keep this layout.
can you please help me find what is wrong?

I am including the css code hereunder:
PHP Code:
body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #708F82;

    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
p {
text-align: left;

}

.twoColFixLtHdr #container { 
    width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #8BB0A1;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColFixLtHdr #header { 
    background: #DDDDDD; 
    padding: 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColFixLtHdr #header2 { 
    background: #DDDDDD; 
    padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColFixLtHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 350px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 250px;

}
.twoColFixLtHdr #sidebar2 {
    float: left; /* since this element is floated, a width must be given */
    width: 370px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 250px;
}
.twoColFixLtHdr #sidebar3 {
    float: left; /* since this element is floated, a width must be given */
    width: 250px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 430px;
}
.twoColFixLtHdr #sidebar4 {
    float: left; /* since this element is floated, a width must be given */
    width: 470px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 430px;
}
.twoColFixLtHdr #sidebar5 {
    float: left; /* since this element is floated, a width must be given */
    width: 350px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    
    height: 250px;
}
.twoColFixLtHdr #sidebar5 p {
    text-align: center;
}
.twoColFixLtHdr #sidebar5 h3 {
    text-align: center;
}
.twoColFixLtHdr #sidebar6 {
    float: left; /* since this element is floated, a width must be given */
    width: 370px;
 /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 250px;
}
.twoColFixLtHdr #sidebar6 p {
    text-align: center;
}
.twoColFixLtHdr #sidebar6 h3 {
    text-align: center;
}
.twoColFixLtHdr #sidebar7 {
    float: left; /* since this element is floated, a width must be given */
    width: 750px;
 /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 600px;
}
.twoColFixLtHdr #sidebar8 {
    float: left; /* since this element is floated, a width must be given */
    width: 250px;
 /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 650px;
}
.twoColFixLtHdr #sidebar9 {
    float: right; /* since this element is floated, a width must be given */
    width: 470px;
 /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    height: 650px;
}


.twoColFixLtHdr #mainContent { 
    margin: 0 0 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    background: #EBEBEB;
    padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.twoColFixLtHdr #footer { 
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD; 
} 
.twoColFixLtHdr #footer p {
    text-align: center;
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
    div#navbar2 {
    height: 30px;
    width: 98%;
    margin-left: 1%;
    padding: 0px;
    background-repeat: repeat-x;
        text-align: center;
    background-image: url(navbar.jpeg);

    
    
}
div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFFFFF;
    line-height: 30px;
    white-space: nowrap;
    font-weight: bold;
}

div#navbar2 li {
 
 list-style-type: none;
 display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 0px 10px;
    
    color: #FFFFFF;
    font-weight: bold;
}
div#navbar2 li a:link {
 color: #FFFFFF;
}
div#navbar2 li a:visited {
}

div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003D6B;
    line-height: 30px;
    
}
div#navbar2 li a:active {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #33CC66;
}


a {     
    color: #1346C2;
    text-decoration: none;}


a:hover {
    color: #AAAAAA;} 

Can anyone expain to me why this page I am working on looks fine in both Google Chrome and Mozilla Firefox, but looks completely askew when using Microsoft Internet Explorer?

Any help would be appreciated!

http://imxevent.com/imx2011/Public/C...ortMenu=101005

view-source:http://imxevent.com/imx2011/Public/C...ortMenu=101005

I think it is this piece of code that is causing me problems (lines 281-287)...

HTML Code:

<p><font style="FONT-SIZE: 20px" color="#c00000"><strong>imX Keynote Sessions</strong></font></p> 

<p><span style="FONT-FAMILY: Univers 57 Condensed; COLOR: black"><font style="FONT-SIZE: 15px">An extension of the forward thinking that has defined the development of imX, these Keynote Presentations reflect imX’s position as a high-level gathering place for manufacturing thought leaders from across the country and around the world. If it’s important for U.S. manufacturing, it's discussed at imX.</font></span>&nbsp;</p><p><table style="width: 510px; height: 138px; " class="RadEDomMouseOver"> 

<tbody> 

<tr> 

<td colspan="3">&nbsp;<strong>KEYNOTE SESSION&nbsp;- DAY ONE</strong></td></tr> 

<tr><td style="text-align: center; vertical-align: top; ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img alt="Michael Molnar" src="http://www.imxevent.com/imx2011/CUSTOM/images/molnar.jpg"&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="text-align: left; vertical-align: middle; "><font><font><br><url=http://www.imxevent.com/imx2011/public/Content.aspx?ID=316&amp;amp;sortMenu=102003 style="color: rgb(255, 0, 0); font-family: arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; ">Michael F. Molnar</a></font></font><b style="font-family: arial, Verdana, sans-serif; font-size: 14px; ">, FSME, CMfgE, PE</b><br><br><table class="RadEDomMouseOver" style="font-family: arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; width: 510px; height: 138px; "><tbody><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Date:</font></strong></td><td>&nbsp;</td><td style="text-align: left; vertical-align: top; ">Monday, September 12, 2011</td></tr><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Speaker:</font></strong></td><td>&nbsp;</td><td style="text-align: left; vertical-align: top; ">Michael F. Molnar, FSME, CMfgE, PE</td></tr><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Title:</font></strong></td><td>&nbsp;</td><td style="text-align: left; vertical-align: top; ">The U.S. Advanced Manufacturing Initiative: <br>Your Role in Public Private Partnerships</td></tr></tbody></table></td></tr><tr><td style="TEXT-ALIGN: left; VERTICAL-ALIGN: top" colspan="3">&nbsp;<iframe width="480" height="315" src="http://www.youtube.com/embed/VUzBbwlpIFk" frameborder="0" allowfullscreen=""></iframe></td></tr></tbody></table></p> 

<p><a name="schutz"></a>

I can not seem to figure this issue out. I know certain browers render different ... for IE FF uses alt tags and IE title tags... (I think thats right)

but this issue seems weird

there is a shadow around my List in IE but not in Firefox and the first line is broken to a second line in Internet explorer

take a look



This might not even be fixable,

Thx!

M

Hi, new to the forums here. I made this website from a free template and I'm very happy with it. In IE8 it looks like garbage though, and I'm wondering if anyone can tell me how to change the code to get it to render somewhat well. (perfection not required)

I would gladly paypal someone some cash that can help me out.

URL: www.sharpeyeproductions.com

I would like to get the tables below the main graphics fixed. The other pages on the site seem to render acceptably in IE8. Thanks for helping out a newbie everybody.

www.oceangoldseafoods.com/

Im having a rendering issue with pages using this template where if it does not scale to the bottom of the browser window, it cuts off the repeating image on the left side of the page and basically breaks the flow of the footer.

Any ideas on possible solutions? Thanks!!!! (This is like the last thing before the site goes public).


(Edited url)

Hello,

I am building a website for a client :

http://timhawarah.com/testing.php

In Firefox (my favorite browser) there is about a 15 px space in the rooftop of the house which is wrong.

In IE the website looks like it should.

What can I do to correct this problem.

Any help would be most appreciated!

Thanks,
TaylorJumbo

MY CSS looks like this:


Quote:
body {


background-color: #202020;

font-family: Arial, Verdana, sans-serif;
font-size:12px;
color:#202020;
text-align: left;


}

#topnavigation li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


#top2 li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


a:link, a:visited {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #202020;
border-bottom: 1px dashed #3e9446;


}

a:hover {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #fff;
border-bottom: 1px dashed #3e9446;


}


a.imagelink:link, a.imagelink:visited, a.imagelink:active {
text-decoration:none;
font-weight: bold;
font-size: 12px;
background-color: none;
color: #202020;
border: 0px;


}

a.imagelink:hover {
text-decoration:none;
background-color: none;
color: #fff;
border: 0px;;

}

#outercase {
width: 790px;
background-color: #fff;
margin: 0px auto;
padding: 0px;
border: 0px;
text-align: left;


}

#top1 {
width: 790px;
height: 57px;
margin: 0px;
padding: 0px;
text-align: left;
background-color: #fff;
background: url("/images/wip1.jpg") no-repeat;
border: 0px;


}


#top2 {
width: 790px;
height: 122px;
margin: 0px;
padding: 0px;
text-align: right;
background-color: #fff;
background: url("/images/wip2.jpg") no-repeat;
border: 0px;


}




#topnavigation {
width: 780px;
margin: 0px;
padding-right: 10px;
padding-top: 5px;
text-align: right;
background-color: #fff;
border: 0px;


}



#middle {
width: 750px;
height: 300px;
margin: 0px;
padding: 20px;
text-align: left;
background-color: #fff;
border: 0px;


}

#banners {
width: 770px;
margin: 0px;
padding: 10px;
text-align: left;
background-color: #fff;
border: 0px;


}

#bottom {
width: 780px;
height: 10px;
font-size: 9px;
margin: 0px;
padding: 5px;
text-align: left;
background-color: #3e9446;
border: 0px;


}
and my xhtml looks like this

Quote:
<?include("header.php");?>

<div id="outercase">

<div id="topnavigation">

<?include("navitop.php");?>

</div>


<div id="top1">

</div><div id="top2">

<?include("teasertop.php");?>

</div>

<div id="middle">

</div>

<div id="banners">

<?include("banners.php");?>

</div>

<div id="bottom">

<?include("footer.php");?>

I currently send out html emails through my esp and do several rendering checks on all major isp's such as hotmail, gmail, yahoo etc.

The email renders fine in all message previews but I do not know a way to check how the email renders for mac users.

I found out recently that the emails render very poorly in macs, with images breaking throughout.

I need to somehow be able to preview how the html will look like in a mac in order to test and fix these rendering issues.

fgwtg tgwtgw twgwrtgwrtg

I have run into a problem when using tables in Firefox. I code for IE 6.0 and I like my browser to determine when to put text on a new line once the table width has been reached. Rather than put breaks <br> in my text I just let the browser decide.

When I open a page in Firefox it does not wrap the text within the table it just allows the text to flow to the right until the end of the text occurs. To fix this I now have to use <br> whenever I want a new line to begin but this creates other problems when others view my pages in IE 6 or IE 7 as the line breaks are now choppy sometimes consisting of one word on a line. My screen resolution is 1280x1024 but if someone does not have this resolution the page is a mess.

I am using Dreamweaver as my editor and Firefox 2.0.0.15. Works just fine with IE 6 or IE 7.

Can anyone help me with this? Here is an example of a page that I been forced to put <br> at the end of each line: http://www.outdoorphotographycanada.com/dwilson.html

Thanks,

Dave