|
|
Post a Project »
Find a Professional HTML Freelancer!
Find a Freelancer to help you with your HTML projects
| |
|
Div problem--Looks great in DW and IE, but messes up in FF
09-13-2009, 05:31 PM
|
Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 13
|
I'm not sure why, but my div tags look great both in Dream Weaver, and when I preview in IE, however, when I preview in Firefox, it looks horrible.
It's a bit tough to tell, but I have an image that is spacing the top banner, nav, etc between the rest of the content area. This image shows up in DW and IE, but not in FF. Any ideas why this might be?
Screen shots:
thank you very much
edit:
code for entire page
PHP Code:
<html>
<head>
<title>newlayout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(images/bg.jpg);
margin-top: 25px;
}
-->
</style>
<link href="site_layout.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_1.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_3.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_2.css" rel="stylesheet" type="text/css">
<link href="site_layout_ct5.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_4.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_6.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_7.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_9.css" rel="stylesheet" type="text/css">
<link href="sitelayout_ct_10.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="sitelayout_ct_11.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #2C6A00;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0" onLoad="MM_preloadImages('images/newlayout_02.jpg','images/services_over.jpg','images/policies_over%20copy.jpg','images/ebay_over.jpg','images/email_over.jpg')">
<!-- ImageReady Slices (newlayout.psd) -->
<div id="site_layout">
<table width="871" height="875" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="5">
<a href="#"><img src="images/newlayout_01.jpg" alt="" width="471" height="116" border="0"></a></td>
<td colspan="2"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','images/newlayout_02.jpg',1)"><img src="images/about_over.jpg" name="aboutus" width="146" height="32" border="0"></a></td>
<td colspan="3" rowspan="3"> <div id="sitelayout_ct_10"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="2"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services','','images/services_over.jpg',1)"><img src="images/newlayout_04.jpg" alt="services" name="services" width="146" height="27" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('policies','','images/policies_over%20copy.jpg',1)"><img src="images/newlayout_05.jpg" name="policies" width="146" height="25" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('email','','images/email_over.jpg',1)"><img src="images/newlayout_06.jpg" name="email" width="253" height="50" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="2"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ebay','','images/ebay_over.jpg',1)"><img src="images/newlayout_07.jpg" name="ebay" width="146" height="32" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="6"> <div id="sitelayout_ct_11"><img src="images/newlayout_08.jpg" width="870" height="34"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="2"><div id="sitelayout_ct_9">
<p> </p>
</div></td>
<td colspan="4" rowspan="2"> <div id="sitelayout_ct_7"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="93" alt=""></td>
</tr>
<tr>
<td colspan="2"> <div id="sitelayout_ct_6"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="225" alt=""></td>
</tr>
<tr>
<td colspan="6"> <div id="sitelayout_ct_5"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="4"><div id="sitelayout_ct_3">Content for id "sitelayout_ct_3" Goes Here</div></td>
<td> <div id="sitelayout_ct_4"></div></td>
<td>
<img src="images/newlayout_15.jpg" width="1" height="184" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="184" alt=""></td>
</tr>
<tr>
<td colspan="6"><div id="sitelayout_ct_2"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="122" alt=""></td>
</tr>
<tr>
<td colspan="6"> <div id="sitelayout_1"></div></td>
<td>
<img src="images/spacer.gif" width="1" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="471" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="136" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="169" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
css in question:
PHP Code:
#sitelayout_ct_11 {
height: 34px;
width: 870px;
}
PHP Code:
#sitelayout_ct_7 {
background-image: url(images/newlayout_10.jpg);
height: 318px;
width: 389px;
}
Last edited by morgant; 09-14-2009 at 11:06 AM..
|
|
|
|
|
09-14-2009, 10:09 AM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 14
Name: Tejaswini Deshpande
|
hey, can you post your code i.e. html and css part, that could be in issue. The site should display in FF because, most of the times the websites displaying properly in FF, display properly on other web browsers also
|
|
|
|
|
09-14-2009, 11:07 AM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 13
|
Ok---edited post with codes. Thank you tejaswini!!
|
|
|
|
|
09-14-2009, 03:19 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 10,017
Location: Tennessee
|
Let's straighten one thing out here - if it looks 'broken' in Firefox, and 'right' in IE, then it's IE that's doing it WRONG!! It is Firefox that is showing you the correct rendering of your code. You'd be much better off and save yourself many headaches by using Firefox as your FIRST measurement tool, and fix it to make IE display correctly second, since IE has far, far more bugs than Firefox.
I have to ask, WHY do you have TEN stylesheets ??? The file names aren't even consistent, just make sure they are correct.
On another note, you should never use ImageReady for your HTML code, and you should get rid of the tables for layout.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
Last edited by LadynRed; 09-14-2009 at 03:20 PM..
|
|
|
|
|
09-14-2009, 04:19 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 13
|
Thank you for the response LadynRed.
I have to admit, I have been designing websites (but mostly flyers & such) for many years, however, this is only the second website I am actually putting up live. I am mostly self taught, so that is why my method may be unusual.
Instead of using the page that photoshop creates after slicing, how should I have done?
Any help is very appreciated.
|
|
|
|
|
09-14-2009, 04:56 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 10,017
Location: Tennessee
|
Quote:
|
so that is why my method may be unusual.
|
It's actually not unusual at all, it happens all the time. Photoshop is an image editing program, it was never meant for HTML and spews some really hideous code.
The 'modern' method for building web sites is using CSS and divs for your layout. Understanding you're actually a beginner at this..take a look at www.csszengarden.com to see what can be done without tables for layout.
To get you started, there are many sources for FREE CSS-based web site templates that you can use and learn from.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
09-14-2009, 09:34 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 13
|
I'm not exactly sure what that website is, LadynRed.
What do you think the problem is with the current code? Also, how could I combine all of the style sheets into one?
|
|
|
|
|
09-14-2009, 10:43 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 3,987
Name: Abel Mohler
Location: Asheville, North Carolina USA
|
To help get a consistent display across browsers you should also include a proper DOCTYPE before the opening <html> tag. When a HTML document just opens with <html> IE renders in Quirksmode, which is different than other browsers in many ways.
__________________
I build web things. I work for the startup
Please login or register to view this content. Registration is FREE
.
|
|
|
|
|
09-14-2009, 11:21 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 13
|
A few hours ago, I would've said with full confidence, I can code a website, but I now I feel completely out of the loop. I am just going to overhaul everything using this tut (thanks to wt). |
|
|
|
|
09-15-2009, 03:46 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 10,017
Location: Tennessee
|
Good tutorial.
Morgan, CSSZenGarden shows you what can be done with CSS. If you read the 'whats this all about' thats on every one of the examples, it will tell you that every site uses the exact same HTML file, and the only thing that is different is the CSS, and the graphics, obviously. The point being, you can accomplish so much more when you leave tables for layout behind!
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
09-15-2009, 08:54 PM
|
Re: Div problem--Looks great in DW and IE, but messes up in FF
|
Posts: 29
|
Web Design is a much more involved process than many beginners think. You have to understand best practices. And using divs and css is MUCH more browser friendly, scalable, and accessible than table based layouts. Not to mention you get better looking code. What you're doing is what I would recommend. Find you a great css/div layout tutorial and redo the whole site.
__________________
Please login or register to view this content. Registration is FREE
Great Web Hosting just $9/mo. Includes free domain and renewals. Free 7 day trial.
|
|
|
|
|
« Reply to Div problem--Looks great in DW and IE, but messes up in FF
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
