Layout looks fine when browsed through Explorer or Safari but for some reason the layout looks disrupted when browsed through Firefox. This is the first website I have built and would really appreciate any guidance as to why this may be happening and how to correct it. The website is hardknock.tv. Thanks in advance for your help.do you wanna provide a link or something? we can't help you if we have nothing to work with.<!-- m --><a class="postlink" href="http://www.hardknock.tv">http://www.hardknock.tv</a><!-- m -->
thankswhy do you use a frame instead of just redirecting?
daft.
and tables don't make for good layouts.
I'll try a few things out when I can find the webdeveloper toolbar(I had to disable it, but it appear that it's vanished completely from the addons list)
ohh, and I wouldn't recommend referring to it as a firefox glitch, it's just because your page doesn't validate.It looks just as broken in IE as in firefox to me. Like has been mentioned, frames are more hassle than they are worth. And tables are not for laying out pages, they are for displaying tabular data. Check all your markup on <!-- w --><a class="postlink" href="http://www.w3.org">www.w3.org</a><!-- w --> validators.
When I outline all the table cells, it looks like everthing has top, bottom and right spacing. All the little bits are aligned to the left, in the middle, with the table cell being too bigOkay so your code is done in tables. Not much you can do now to fix that. Though from looking at your source code a lot of your images seem like they have not been uploaded. Take a look for yourself
<HTML>
<HEAD>
<TITLE>hktv2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {font-size: 12px}
.style2 {font-size: 11px}
.style4 {
font-size: 11px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
.style5 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
}
.style6 {color: #FFCC00}
-->
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (hktv2.psd) -->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/spacer.gif" width="1" height="1">
<TABLE WIDTH=1144 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=29>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/hktv9_01.gif" WIDTH=33 HEIGHT=1228 ALT=""></TD>
<TD COLSPAN=34>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/hktv9_02.gif" WIDTH=1070 HEIGHT=62 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=7>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/hktv9_03.gif" WIDTH=41 HEIGHT=262 ALT=""></TD>
<TD>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"file:///Macintosh%20HD%20NEW/Users/nickhuff/Desktop/hktv9/images/spacer.gif" WIDTH=1 HEIGHT=62 ALT=""></TD>
</TR>
<TR>You will never get IE to attempt to perform like a modern browser, such as Firefox, without a proper doctype. See my link below. Use html4.01 strict.
Your problem is because you designed this using IE which is old, buggy and non-standard. Never, ever do this. Always use a modern browser such as, anything but IE.If this is your first time designing a web site i would highly recommend going out to Barns and Noble or some other book store, finding a book about html coding or beginning web design and spend a few hours reading. You will never get a good looking site using image ready or just cutting up an image and trying to place it in a table. You can get a lot of the stuff you want without using images for links and cut down on you total images for background colors and such by a ton if you use div tags and css. I used to use tables a lot but they are a hassle and nearly impossible to get to line up the way you want them to. Take a look at the company site that I am working on now <!-- m --><a class="postlink" href="http://www.ecdprint.com/test">http://www.ecdprint.com/test</a><!-- m --> and look at the source code and the css file. I hand coded everything and used only a few images, I think 14 total images for the layout and most of them are loaded outside the html in the css file. That speeds up load time a ton. Well, take a look at it and see if you can redo it using only div tags and css for layout. You will be surprised what you can actually accomplish with it.I don't know if this will help you but when I really don't know what to do to make a website look the same in Explorer and Firefox I put *html in front of the styles I want to define only for Explorer.
For example:
<style type="text/css">
<!-- This is for Firefox -->
.menutop{
margin-left:10px;
}
<!-- This is for Explorer -->
*html .menutop{
padding-left:10px;
}
</style>
Also : never use padding for firefox. Instead of using padding create some div inside your div and use margin.I would honestly start again using divs rather than try and fix thisI don't know if this will help you but when I really don't know what to do to make a website look the same in Explorer and Firefox I put *html in front of the styles I want to define only for Explorer.
For example:
<style type="text/css">
<!-- This is for Firefox -->
.menutop{
margin-left:10px;
}
<!-- This is for Explorer -->
*html .menutop{
padding-left:10px;
}
</style>
Also : never use padding for firefox. Instead of using padding create some div inside your div and use margin.
*html isn't valid but * html is. Also what is your reasoning behind not using padding for Firefox? I've had no problems with it. margin and padding don't produce the same effect you know.I know that padding and margin don't produce the same effect. In firefox, the padding is acting like a margin,... Well, everytime I used the padding in Firefox it was treating them as if they were margin and to bypass this error I used to put everything in Div and put margin instead of padding.
thankswhy do you use a frame instead of just redirecting?
daft.
and tables don't make for good layouts.
I'll try a few things out when I can find the webdeveloper toolbar(I had to disable it, but it appear that it's vanished completely from the addons list)
ohh, and I wouldn't recommend referring to it as a firefox glitch, it's just because your page doesn't validate.It looks just as broken in IE as in firefox to me. Like has been mentioned, frames are more hassle than they are worth. And tables are not for laying out pages, they are for displaying tabular data. Check all your markup on <!-- w --><a class="postlink" href="http://www.w3.org">www.w3.org</a><!-- w --> validators.
When I outline all the table cells, it looks like everthing has top, bottom and right spacing. All the little bits are aligned to the left, in the middle, with the table cell being too bigOkay so your code is done in tables. Not much you can do now to fix that. Though from looking at your source code a lot of your images seem like they have not been uploaded. Take a look for yourself
<HTML>
<HEAD>
<TITLE>hktv2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {font-size: 12px}
.style2 {font-size: 11px}
.style4 {
font-size: 11px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
.style5 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
}
.style6 {color: #FFCC00}
-->
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (hktv2.psd) -->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/spacer.gif" width="1" height="1">
<TABLE WIDTH=1144 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=29>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/hktv9_01.gif" WIDTH=33 HEIGHT=1228 ALT=""></TD>
<TD COLSPAN=34>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/hktv9_02.gif" WIDTH=1070 HEIGHT=62 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=7>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"/hardknock/test%20hktv/hktv9_03.gif" WIDTH=41 HEIGHT=262 ALT=""></TD>
<TD>
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"file:///Macintosh%20HD%20NEW/Users/nickhuff/Desktop/hktv9/images/spacer.gif" WIDTH=1 HEIGHT=62 ALT=""></TD>
</TR>
<TR>You will never get IE to attempt to perform like a modern browser, such as Firefox, without a proper doctype. See my link below. Use html4.01 strict.
Your problem is because you designed this using IE which is old, buggy and non-standard. Never, ever do this. Always use a modern browser such as, anything but IE.If this is your first time designing a web site i would highly recommend going out to Barns and Noble or some other book store, finding a book about html coding or beginning web design and spend a few hours reading. You will never get a good looking site using image ready or just cutting up an image and trying to place it in a table. You can get a lot of the stuff you want without using images for links and cut down on you total images for background colors and such by a ton if you use div tags and css. I used to use tables a lot but they are a hassle and nearly impossible to get to line up the way you want them to. Take a look at the company site that I am working on now <!-- m --><a class="postlink" href="http://www.ecdprint.com/test">http://www.ecdprint.com/test</a><!-- m --> and look at the source code and the css file. I hand coded everything and used only a few images, I think 14 total images for the layout and most of them are loaded outside the html in the css file. That speeds up load time a ton. Well, take a look at it and see if you can redo it using only div tags and css for layout. You will be surprised what you can actually accomplish with it.I don't know if this will help you but when I really don't know what to do to make a website look the same in Explorer and Firefox I put *html in front of the styles I want to define only for Explorer.
For example:
<style type="text/css">
<!-- This is for Firefox -->
.menutop{
margin-left:10px;
}
<!-- This is for Explorer -->
*html .menutop{
padding-left:10px;
}
</style>
Also : never use padding for firefox. Instead of using padding create some div inside your div and use margin.I would honestly start again using divs rather than try and fix thisI don't know if this will help you but when I really don't know what to do to make a website look the same in Explorer and Firefox I put *html in front of the styles I want to define only for Explorer.
For example:
<style type="text/css">
<!-- This is for Firefox -->
.menutop{
margin-left:10px;
}
<!-- This is for Explorer -->
*html .menutop{
padding-left:10px;
}
</style>
Also : never use padding for firefox. Instead of using padding create some div inside your div and use margin.
*html isn't valid but * html is. Also what is your reasoning behind not using padding for Firefox? I've had no problems with it. margin and padding don't produce the same effect you know.I know that padding and margin don't produce the same effect. In firefox, the padding is acting like a margin,... Well, everytime I used the padding in Firefox it was treating them as if they were margin and to bypass this error I used to put everything in Div and put margin instead of padding.
Cyntila said: