|
HTML - Why Is My Site Different In Windows Firefox Compared To Mac
I've just used adobe browser lab to look at my website in windows browsers and it looks awful and I have no idea why. All my floats seem to have collapsed.
Can anyone point me as to what I may have done wrong? Here is my website Similar TutorialsHi, I have a site that goes over about 3 pages in length and in the IE the page is longer than in firefox. This is really annoying when you have next to the page a sidebar that is supposed to have the same length as the page but in the IE the sidebar does not reach the end of the page (because the page is longer due to larger spacing). To me it seems that IE makes more spaces between the text lines like h1, h2, p, etc. Is this a common problem and is there any solution to this? i am using megaupload for the first time, and so far i am totally confused in how im supposed to use it. that is beside the point, however. When i embed the player, my song does not play as it is supposed to. it does nto play at all, even when i tell it to play manually (even though it is set to autoplay). here is the code i embed into my site: ~~~ <OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="http://www.megaupload.com/03-30_seconds_to_mars-the_kill-h8me.mp3"> <PARAM name="autostart" VALUE="true"> <PARAM name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="true"> <PARAM name="ShowDisplay" VALUE="true"> <EMBED TYPE="application/x-mplayer2" SRC="http://www.megaupload.com/03-30_seconds_to_mars-the_kill-h8me.mp3" NAME="MediaPlayer" WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="1" ShowDisplay="1" autostart="1"> </EMBED> </OBJECT> ~~~ i believe the problem is the link to the file. did i write the link correctly? how do i find the direct link to the file? can megaupload be used for this? i am having problems using megaupload, and so i think my problem is more about finding the correct link for my file and not so much a problem with the html itself, as i think i did all that correctly except for the 2 places the link to my file should be. if no one knows how to use megaupload, someone please tell me a good site to use to upload music files. My web site looks the way it's suppost to in IE, but not in FireFox. Could someone take a look with fresh eyes and let me know what needs to be fixed. I am using an external Style Sheet. Wrathchid Productions Code: /** Tempalte 20 **/
body {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
}
html, body, #wrapper, h1, #nav, #nav li {
margin: 0;
padding: 0;
list-style: none;
}
th, td {
font-size: 10px;
}
img { border: 0; }
#wrapper {
margin: auto;
text-align: left;
width: 750px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0 0 0 0;
padding: 0;
}
h3 {
margin: 4px 0 0 0;
padding: 0 0 0 0;
}
p {
margin: 1em 0;
padding: 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 1px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
line-height: 1px;
}
.left {
float: left;
margin: 1px 8px 0px 0px;
}
.right {
float: right;
margin: 1px 0px 0px 8px;
}
.softright {
text-align: right;
}
.readmore {
text-align: right;
padding-right: 1em;
}
/* ***** */
body {
background: #4A4A4A;
color: #fff;
padding-bottom: 30px;
}
a {
color: #ADADAC;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #fff;
}
.divider {
clear: both;
}
.divider hr {
display: none;
}
#wrapper {
width: 684px;
background: #5A5959 url(images/body_bg.gif) repeat-y;
border-bottom: 1px solid #898888;
}
/* header */
#header {
background: url(images/header_bg.jpg) repeat-x;
position: relative;
margin-right: 1px;
height: 256px;
}
#header h1 {
position: absolute;
top: 24px; left: 0px;
}
#header a {
color: #EADD13;
}
#header a:hover {
color: #FFF;
}
#header #girl {
position: absolute;
top: 0px; left: 300px;
width: px;
background: url(images/header_cap.gif) top right no-repeat;
}
#header form {
position: absolute;
top: 224px; left: 10px;
margin: 0;
padding: 0;
color: #B3B1B1;
font-style: italic;
}
#header form .text {
background: #7B7B7B;
color: #FDFB30;
width: 122px;
border-top: 1px solid #1C1C1C;
border-right: 1px solid #979797;
border-bottom: 1px solid #B3B3B3;
border-left: 1px solid #3F3F3F;
}
#header form .submit {
background: #5A5959;
color: #FDFB30;
border: none;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 3px;
}
* html #header form .submit {
padding: 0 3px;
padd\ing: 3px;
}
#header #signup {
position: absolute;
top: 218px; right: 0px;
width: 20em;
padding: 13px 20px 0 0;
text-align: right;
background: url(images/header_divider.gif) top right no-repeat;
}
/* nav */
#nav {
position: absolute;
top: 98px; left: 41px;
width: 171px; height: 88px;
}
#nav li {
background: url(images/arrow.gif) left center no-repeat;
width: 183px; height: 16px;
margin-bottom: 2px;
padding-left: 18px;
float: left;
}
* html #nav li {
width: 210px;
w\idth: 183px;
}
#nav a {
display: block;
width: 100%;
padding-top: 2px;
font-weight: normal;
}
#nav a:hover {
color: #fff;
}
/* body */
#body {
margin: 0px 10px 10px 10px;
background: #313131 url(images/divider_v.gif) 417px 0px repeat-y;
}
#body h2 {
font-weight: normal;
color: #FDFB30;
line-height: 21px;
margin: 0 -4px 0 -4px;
background: url(images/title_bg.gif) repeat-x;
}
#body h2 span {
display: block;
background: url(images/title_bullet.gif) top left no-repeat;
}
#body h2 span span {
padding-left:41px;
padding-bottom: 6px;
background: url(images/title_cap.gif) top right no-repeat;
}
#body #left {
float: left;
width: 417px;
}
* html #body #left .left {
margin-top: 12px;
}
#body #left .divider {
margin: 0 6px 15px 6px;
border-bottom: 1px solid #464646;
height: 10px;
}
#body #right {
float: right;
width: 236px;
}
#body #right p {
margin-top: 0.5em;
}
#body #right .divider {
background: url(images/divider_h.gif) repeat-x;
height: 9px;
}
#body .i {
padding: 0px 15px 15px 15px;
line-height: 1.3;
}
#body .j {
padding: 0px 10px 5px 5px;
}
#body .k {
padding: 0px 8px;
}
* html #right .readmore {
margin-bottom: 0;
}
/* right */
#outside {
margin-top: 6px;
margin-left: 10px;
position: relative;
}
ul.central li, ul.central {
text-align: center;
list-style: none;
padding: 0 0 2px 0;
margin: 0;
}
#right .k p {
margin-bottom: 0.2em;
}
#right a {
color: #F4CC0F;
font-weight: normal;
}
#right a:hover {
color: #fff;
}
/* footer */
#footer {
margin-top: 15px;
text-align: center;
}
#footer, #footer a {
font-weight: normal;
color: #F4CC0F;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
color: #fff;
}
Why is it that this site looks good in most browsers but not Firefox? 'div id=search' and 'div id=mainnav' are not inline with the rest of the site (they are 10px to low). You could add HTML Code: div#search, div#mainnav { margin-top: -10px; }
to a Firefox only CSS file or something. I don't think no-one else could do what I just (or a better job for that matter). I just thought I would tell you guys. Alright. Hpefully you all will be able to give me a helping hand. My site is located at http://www.eternalhogwarts.com If you have an older version of I.E look at it. It looks fine. However when you view it with Firefox and IE 7.0 it looks really strange and I really don't know what to do. Please help!!! Hi friends, I have just "finished" creating http://www.ambertower.co.uk which seems to be up and running just fine in internet explorer. However, when I test the site in firefox it is all going very wrong. Can someone please have a look at the site's HTML for me and let me know where I am going wrong. Thanks very much for your help!! Code: <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style>
<!--
/* Style Definitions */
div.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
li.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
p.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{mso-hyphenate:auto;}
--></style>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Announcements</title>
</head>
<body border="0" width="100%" height="912" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" bgcolor="#0000FF">
<tr>
<td colspan="3" height="184">
<table border="0" width="85%" cellpadding="0" height="665" cellspacing="0">
<tr>
<td height="144" width="98%" colspan="3" align="center" bgcolor="#0000FF">
<img border="0" src="images/BannerGMSN.jpg" width="100%" height="144"></td>
</tr>
<tr>
<td height="36" colspan="3" align="center" bordercolor="#FFFFFF">
<p align="center">
<font face="arial" color="#FFFFFF" size="4">
<b><a href="index.htm" style="text-decoration: none">Home</a>
<a href="Announcements.htm" style="text-decoration: none">
Announcements</a>
<a href="Athletics&Activities.htm" style="text-decoration: none">
Athletics & Activities</a>
<a href="GMSN_Information.htm" style="text-decoration: none">
GMSN Information</a>
<a href="https://www.geneva304.org/departments/curriculum_instruction/frameworksformiddleschool.asp" style="text-decoration: none">
Curriculum</a></b> </font></td>
</tr>
<tr>
<td width="16%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" valign="top">
<!--[if pub]><xml>
<b:ColorScheme type="OplSccm" oty="92" oh="279">
<b:Rgecp type="OplEcp" priv="214">
<b:OplEcp type="OplEcp" priv="411">
</b:OplEcp></b:Rgecp></b:ColorScheme><![if pub11]><xml>
<b:Page type="OplPd" oty="67" oh="265">
<b:PtlvOrigin type="OplPt" priv="511">
<b:Xl>22860000</b:Xl>
<b:Yl>22860000</b:Yl>
</b:PtlvOrigin>
<b:Oid priv="605">(`@`````````</b:Oid>
<b:OhoplWebPageProps priv="90E">266</b:OhoplWebPageProps>
<b:OhpdMaster priv="D0D">263</b:OhpdMaster>
<b:PgtType priv="1004">5</b:PgtType>
<b:PtlvOriginEx type="OplPt" priv="1111">
<b:Xl>110185200</b:Xl>
<b:Yl>110185200</b:Yl>
</b:PtlvOriginEx>
</b:Page>
</xml><style><!--
/* Style Definitions */
div.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
li.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
p.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{mso-hyphenate:auto;}
--></style> <![if pub11]><img border="0" src="images/viking.jpg" width="116" height="142"><br>
<font color="#FFFFFF" face="Arial">
<span style="font-weight: 700; background-color: #FFFFFF">
</span>
</font><br>
</td>
<td width="56%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" rowspan="2" valign="top">
<p style="margin-top: 0; margin-bottom: 0"><br>
<span style="font-weight: 700">
<font face="Arial" color="#0000FF" size="6">Announcements</font></span></td>
<td width="28%" bgcolor="#FFFFFF" align="center" bordercolor="#FFFFFF" rowspan="2" valign="top">
<p> </td>
</tr>
<tr>
<td width="16%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" valign="top" height="348">
<div style="position: absolute; top: 591px; left: 41px; width: 104px; height: 101px; z-index: 1">
<p style="line-height: 150%; margin-top: 6px; margin-bottom: 6px"> <a href="http://www.geneva304.org/">
<img border="0" src="images/Announ1.jpg" width="104" height="101"></a></div>
</td>
</tr>
</table>
</body>
</html>
Hi everybody, For some reason, my site sucks in IE but it's good in FireFox. When I view it in IE, the tables are all out of wack, and it doesn't look right, but it looks fine in firefox. The site is http://74.53.110.194/~redstar5/ thanks for your help, treadstar http://www.ptacnik.com/index102.html When previewing through Dreamweaver in ANY of these 3 browsers it looks fine. (from my local drive) But once online it only loads in Firefox. Is there something fishy with the frames perhaps? missing an XML doc on my end? I can't figure out what is causing this. Any help would be very much appreciated. http://www.ptacnik.com/nav1.html is the top frame and the list below are the frames loaded under nav1. http://ptacnik.com/about101.html http://ptacnik.com/design.html http://ptacnik.com/illustration.html Google chrome, IE 7 and 8, and i think Opera all load the images fine. but Firefox (latest version) just does not load all of them. I refresh the page and it loads the ones that did not load before but still has some unloaded. Can some one please explain to me or help me on this? i have been pulling my hair out Thanks for help people, photos should be below. The first one is the Firefox one. Also here is a link to the page: http://www.dubbest.com/index%20MAIN.htm I don't understand why this is rendering differently. It looks perfect in Firefox but when I switch to IE it is all screwed up. http://www.rosamondgroup.com XHTML: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta> <title>Rosamond Appraisal Group </title> <link href="style.css" rel="stylesheet" type="text/css"></link> </head> <body> <div id="logo"> <span class="style1"> <img src="images/raplogo.png" alt=""></img> </span> </div> <div id="complete"> <div id="main"> <div id="header"> <span class="style1"> About Us</span> </div> <div> <img src="images/content-box_04-215.jpg" alt=""></img> </div> <div id="content"> Jimmy Rosamond<br/> Louisiana State Certified General<br/> Real Estate Appraiser #G0655<br/> JimmyR@RosamondGroup.com</div> <div> <img src="images/content-box_07-215.jpg" alt=""></img> </div> </div> <div id="main2"> <div id="header2"> <span class="style1"> Contact Information</span> </div> <div> <img src="images/content-box_04.jpg" alt=""></img> </div> <div id="content2"> 434 Glendale Drive<br/> Metairie, La 70001<br/> (504) 831-7903<br/> (504) 831-8938 (FAX) </div> <div> <img src="images/content-box_07.jpg" alt=""></img></div> </div> </div> <div id="valid"> <a href="http://validator.w3.org/check?uri=referer"><img class="img" src="images/valid-xhtml10.png" alt="" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img class="img" src="images/vcss.png" alt="" /></a> </div> </body> </html> CSS: Quote: /* CSS Document */ #logo { margin-left:10%; margin-right:10%; margin-top:10%; text-align:center; } #complete { margin-top:5%; margin-left:10%; margin-right:10%; } #main { width:215px; border:1px solid #000000; float:left; margin-left:20%; } #header { width:215px; height:22px; background-image:url(images/content-box_02.jpg); background-repeat:repeat-x; } #content { height:80px; background-image:url(images/content-box_05-215.jpg); background-repeat:repeat-y; font-size:11px; } .style1 { font-family:"Century Gothic"; font-size:12px; color:#FFFFFF; background-color:inherit; } #main2 { width:200px; border:1px solid #000000; float:right; margin-right:20%; } #header2 { width:200px; height:22px; background-image:url(images/content-box_02.jpg); background-repeat:repeat-x; } #content2 { height:80px; background-image:url(images/content-box_05.jpg); background-repeat:repeat-y; font-size:11px; } #valid { position:absolute; left:80%; top:92%; } .img { border:0px; } I've also included screenshots of both renders. Firefox: http://flickr.com/photos/boryenka/2559461808/ IE: http://flickr.com/photos/boryenka/2558636987/ Hi, I ran a code validation on my site (www.improvizations.com), it came back with 11 errors. Many of them look like this: Line 9, Column 31: there is no attribute "leftmargin". <body topmargin="0" leftmargin="0" marginwidth="0" rightmargin ="0" marginheight and this: Line 15, Column 43: required attribute "alt" not specified. <div id="logo"><img src="images\logo.gif" /></div> How do I fix this? Also, my site looks fine in IE but awful in Firefox. What's going on? Any help would be greatly appriciated. I'm a newbie with all of this. Thanks!! http://www.immc.ca/index.php?option=...d=24&Itemid=47 When you scroll over the drop down menu items, they appear behind the canada map flash piece. On other pages of the site, the menu appears correctly, in front of the site content. This is only happening in Firefox. Hello, for one site only, IE6 fails to prompt to save password for a Login Form. This is a new site. IE6 *does* prompt for other sites (e.g. amazon.com sign-on) The IE autocomplete settings are set to prompt in the usual way. I've tried clearing all cookies/cache etc. There are no autocomplete disabled/off settings in the page. What is strange is that Firefox does prompt to save password for site for the problematic page, as I would expect IE to. The only thing that's maybe a bit unusual is that the INPUT name="..." in the Form contains unusual chars such as ^ and !. But i wouldnt have though that was a problem (?). Any ideas why the save password prompt is not appearing for this one site? thanks. I have a horizontal bar image that has been sliced so it is an iframe. The iframe's source is links.htm (as the horizontal bar is a link bar) so that I can change my site's main links if I have to. Anyways, the problem is this, my link bar looks perfect in firefox but as soon as I view the site in explorer the text doesn't fit in the iframe and there are arrows as if you have to scroll down to view the text. Here is an image of what I mean: Let me know if I should add information. http://www.mythlabb.com/ IE displays the top logo just fine. Firefox displays it as a broken image. It's just a .jpg file, nothing special, and it's on the page as a regular image tag right at the top of the Body tag. Am I missing some little Firefox quirk here or something? I removed the text content in the code snippet below but it's enough to get the idea. Code: <html> <head> <link rel="stylesheet" href="styles/mainStyle.css" type="text/css" media="screen" charset="utf-8" /> </head> <body> <center><img src="images\mythLogo.jpg"></center> <center>webdesign - consultation - graphics<br></center><br><br> <div id="topnav">Insert menu here</div> <div id="maintext">Insert text here</div> </body> </html> I need some serious help, I have no idea what to check: www.enviral-design.com go to th galleries page, and see what I mean. if you are in Safari or Chrome, it loads exactly like it's supposed to(for me at least) However, on IE or Firefox the gallery page loads all stretched, and as soon as you click on any thumbnails or spry accordion tabs the page just explodes!! what gives?? I've replaced the css for the accordion spry panels with deault DW css, no luck. same with the .js file that the accordions use, also no luck.... I have no idea what to do, or where to start.... anyone?? please help me out!! thanks for your time, Lucas Hi All, im new here so go easy. this might be an easy answer. i am making this website and am positioning items around the site using div tags. the site looks just how i want it to in Firefox but when i open it in IE it has different sizes everywhere and does not match up. also i have a logo in the upper right of the site. how do i get this to resize when the browser size is changed? here is the sites code. <html> <head> <title>Maroondah Trailers</title> </head> <body BGCOLOR="807a7a"> <div style="background-image:url('pictures/bg.gif'); background-repeat: repeat; position: absolute; left: 0%; top: 0%; width: 16%; height: 97%;"></div> <div style="background-image:url('pictures/bg.gif'); background-repeat: repeat; position: absolute; left: 84%; top: 0px; width: 16%; height: 97%;"></div> <div style="background-color: White; position: absolute; left: 16%; top: 15%; width: 68%; height: 82%;"></div> <div style="background-color: ff3600; color: white; position: absolute; left: 16%; top: 15%; width: 68%; height: 4%;"></div> <div style="position: absolute; left: 60%; top: 3%; width: 30%; height: 40%;"><img src="pictures\logo2.gif"></div> <div style="background-color: black; position: absolute; left: 84%; top: 0%; width: .2%; height: 97%;"></div> <div style="background-color: black; position: absolute; left: 16%; top: 0%; width: .2%; height: 97%;"></div> <div style="background-color: black; position: absolute; left: 0%; top: 97%; width: 100%; height: .2%;"></div> <div style="background-color: black; position: absolute; left: 0%; top: 97%; width: 100%; height: .2%;"></div> <div style="background-color: black; position: absolute; left: 16%; top: 15%; width: 68%; height: .2%;"></div> <div style="background-color: black; position: absolute; left: 16%; top: 19%; width: 68%; height: .3%;"></div> </body> </html> heres what they both look like thanks alot Matt I am wondering if it is possible to create an INDEX.HTML to redirect to another website? I would like it to display the redirected site, but if possible keep to the original address.. e.g. A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar. Hope I explained ok, any responce would be much appricated! Thanks! Hey there, I'm trying to code my site for not only IE8 but also IE6/7 versions. I can't seem to figure out how to download the earlier versions without either getting rid of IE8 or just not being able to download them. Is it possible for me to have IE6, 7, and 8 on one computer? Thanks, ~C-Style~ |
|||||||