HTML - Has Firefox Html / Css Guidelines Been Changed?!
I'm utterly confused. Within my heavily "modded" phpBB2 forum, at the top is our Logo, which is a gif image of 800 x 150 in size. Always has been that size since last year (apart from a change in the logo itself).
Now, up to a couple of days ago, the Logo displayed correct ratio in ALL browsers. But for some extreme strange reason, the image is now reduced from 800 to 720 in Firefox!! None of the css has been altered, not the overall_header.tpl file, not has any configurations for the Firefox browser been messed about with either. Section from overall_header.tpl file... Code: <table cellspacing="0" width="100%" id="forum"> <tr> <td class="forum-header" align="center"><a href="{U_INDEX}" title="{L_INDEX}"><img src="templates/ca_aphrodite/images/sblogoyg3.gif" width="800" height="150" alt="{L_INDEX}" /></a></td> <td class="forum-header header-search" align="right" valign="bottom"> </td> </tr> <tr> section from css.... Code: /* header */ .forum-header { background: #F7F7F7 url(images/bg_logo.gif) top left repeat-x; padding: 0; } All the above does in places a line wih gradiant behind the logo. To get an overall idea, see my website: http://www.screwballscrabble.co.uk Anyone got any ideas why Firefox is not displaying images at the original size? Any pointers would be extremely grateful! Thanks. Similar Tutorialshello, something has went wrong with a site i done years ago! the background was fixed in the middle and stayed put while everything else moved over it. now for some reason it had became tiled and is scrolling with everything! if any one can help that would be awesome! here is the code... <style> { } table, tr, td { background-color:transparent; Center; background-attachment:fixed; background-repeat:no-repeat; border-color:EECC22; border-width:0px; border-style:Solid; } table table { border:0px; } table table table table { border:0px; background-image:none; background-color:transparent; } table border:none; border-width:0px; } table table table { width:90%; max-width: 600px; } table table table table { width:100%;; } body { background-color:00002C; background-image:url(http://i72.photobucket.com/albums/i1...ysSquare.jpg); background-position:Top table table { border-style:Groove; border-width:2px; border-color:0000FF; background-repeat:no-repeat; background-attachment:fixed; } table table table td { background-color:00005F; } table, tr, td, li, p, div { color:0000FF; font-size:8pt; } .btext { color:0000FF; font-size:8pt; } .blacktext10 { color:0000FF; font-size:8pt; } .blacktext12 { color:0000FF; font-size:8pt; } .lightbluetext8 { color:0000FF; font-size:8pt; } .orangetext15 { color:0000FF; font-size:10pt; font-family:Mv Boli; } .redtext { color:0000FF; font-size:8pt; } .redbtext { color:0000FF; font-size:8pt; } .text { color:0000FF; font-size:8pt; font-weight:bold; } .whitetext12 { color:0000FF; font-size:8pt; } a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link { color:0000FF; font-size:8pt; } a:hover, a.searchlinksmall:hover { color:0000FF; font-weight:bold; text-decoration:underline; } a.navbar:active, a.navbar:visited, a.navbar:link { color:0000FF; } a.navbar:hover { color:0000FF; text-decoration:underline; } a.redlink:active, a.redlink:visited, a.redlink:link { color:0000FF; } a.redlink:hover { color:0000FF; text-decoration:underline; } .nametext { color:0000FF; font-size:8pt; } .contactTable { width:300px!important; height:150px!important; padding:0px!important; background-image:url(http://img5.pimp-my-profile.com/i1/9...d5b02397.png); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;}.contactTable table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}.contactTable a img {visibility:hidden; border:0px!important;}.contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;}.contactTable .text {font-size:1px!important;}.contactTable .text, .contactTable a, .contactTable img {filter:none!important;background-color:none!important;} .contactTable. whitetext12 {display:none;; } table td div div font {visibility:hidden;} </style> <p align="center"><a></a><br /><a href="" target="_blank"></a> <a href="" target="_blank"></a> <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnBpY29vZGxlLmNvbS8=" target="_blank"></a></p> We are Solarize a rock/metal/electro quartet from sunny Strathaven. We've spent a lot of time writing, recording and playing shows and finally have an album brewing up! We are back in the writing process to begin 2008 with one demo from new CD 'The 4th law of motion' already on tinternet and more still to be written/finished. We feel we've came a long way from playing 'remember when' in 05 to where we are today. Do come along to some shows and have a listen to whatever you can find online! <br /> <br /> <br /> **Here at solarize we are greatfull for any imput and will love you forever if you add us!<br /> <p align="center"><br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="80" width="375" align="middle"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.poqbum.com/add/shock1.swf" /> <param name="wmode" value="transparent" /> <param name="quality" value="high" /> <param name="flashvars" value="texter=Solarize" /> <param name="bgcolor" value="000000" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.poqbum.com/add/shock1.swf" height="80" width="375" align="middle" wmode="transparent" quality="high" flashvars="texter=Solarize" bgcolor="000000" /> </object><br /><a href="target=" target="_blank"><small></small></a><br /></p> <br /> <style>td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;} td.text td.text td a {visibility:hidden;}</style> <a href="target=" target="_blank"></a> <style> td.text td.text table table table td a img {width:100px;} td.text td.text table table table td div img {width:80px;} td.text td.text table table td img {width:260px; max-width:260px; width:auto;} td.text td.text table table td div img {width:80px;} * html td.text td.text table table td img {width:260px;} * html td.text td.text table table td a img {width:90px;} * html td.text td.text table table td div img {width:80px;} </style> <a href="" target="_blank"></a> I have a website and of course I have my index.html in my documents. Well today I was doing something in Notepad that had nothing to do with html and saved it as text file. Now the Blue E icon for my index.html has changed. I can still open it by choosing open with Internet Explorer. This is driving me nuts does anyone know how to get the Icon back. I am running WindowsXP. I do hope my post is clearer than mud is Hi Guys. I recently updated my website, I moved my company logo so it would be above my main navigation, however by doing this I needed to change the .css slightly (the "Stage" width was altered - this was the only thing I changed). By doing this it allowed for a slightly newer navigation layout which you can view HERE. However since I have done this, the website is no longer viewable properly using a Mac (it still looks fine on a PC) why would this have changed? (I took a screen grab of what I mean - you can view it HERE I'm not a pro by any means, I have self taught myself but I am seriously stumped by this. Any help is welcome! In my website a sample of my request and it shows how far I have gotten. Go to: www.openoursite.com and select keyword: CHRYSLER Here you will see a picture of my Red 1961 Chrysler 300. By the way, it is nearly perfect as well as beautiful. Below the picture is a button that when clicked, the picture changes to the next picture in the series of pictures. I want to beable to change the bulleted text when the picture changes. 2nd, I want the text at the bottom of the screen to beable to be changed. 3rd, I would like to beable to have a switch in the code that I can set so that only 1 of the two text areas will change and the other stay as is. On a car application, I would leave the bulleted text as is and only change the text below. Probably there should be 2 seperate switches that can be turned off or on. I have one customer (advertiser) that wants the bulleted text to change and have no text at the bottom. Can anyone help me. Thanks Launchnet Hello, I am having this problem with this one div that is nested within another one. I am trying to adjust the the nested divs margin, but the problem I am having is when I change the margins of it, then it changes the margin of the div that it is in. I am not sure why I am having this problem. Here is the page http://www.mesquitechristmas.com/development/ The code in question is below. If I adjust the margins of welcome and reservations then it also changes the content divs margin. How can I fix that content div so the maring doesn't change when I change the divs nested inside it? Code: <div id="content"> <div class="welcome"> <img src="images/welcome.gif" alt="Welcome To Texas Camping Forum" style="margin-top: 3px;"> <p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br> Bookmark us and check back often....</p> </div> <div class="reservations"> <img src="images/reservations.gif" alt="Make Reservations" style="margin-top: 3px;"> <p> Texas Parks & Wildlife Dept. uses Reservation America as their choice for making reservations online.</p> </div> </div> Code: #content { margin:5px 0 0 140px; width: 630px; border-left: 1px solid #F4F4F4; } .welcome { margin: 20px 0 0 20px; width: 600px; text-align: center; background: #f5f6ea; border: 1px solid #b3b58d; } .reservations { margin: 10px 0 0 20px; padding: 5px; width: 300px; background: #f5f6ea; border: 1px solid #b3b58d; } -Thanks OK, I have an expandable menu that, when someone clicks on an image, it takes them to a certain page. The code is currently: HTML Code: p = new createPanel('al','Account Info'); p.addButton('images/menu/story.jpg','Story','parent.main.location="background.php"'); o.addPanel(p); I have about 12 of these links, and all the others in the menu work fine. With this particular one, I changed the "parent.main.location" At first, the line was 'parent.main.location="story.php"'); but I decided to change it. I've uploaded all the changes, and yet this link STILL accesses 'story.php' instead of 'background.php' like it is supposed to. This is the best part: I deleted the page 'story.php' off my server. Even after me doing that, the link continues to call up that page. I have cleared my cache, cookies and Firefox's "personal data" collection. Also, there are no other pages on my site that even look like 'story.php'. Anyone know why a line of code specifically calling for a different page would keep pulling up an old page - especially a page that has been deleted? Thanks a ton, Aaron Hey there, I have this page working in HTML and Opera,, but wont work in firefox <html> <title>Installer</title> <head> <style type="text/css"> <!-- #img {position: absolute; top: 0px; left: 0px; } a.1:link {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; position: absolute; top: 110px; left: 40px; } a.1:visited {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; position: absolute; top: 110px; left: 40px;} a.1:hover {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; font-weight: bold; position: absolute; top: 110px; left: 40px;} a.2:link {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; position: absolute; top: 147px; left: 40px; } a.2:visited {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none;position: absolute; top: 147px; left: 40px; } a.2:hover {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; font-weight: bold; position: absolute; top: 147px; left: 40px;} a.3:link {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; position: absolute; top: 185px; left: 40px; } a.3:visited {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; position: absolute; top: 185px; left: 40px; } a.3:hover {font-size: 20px; color: #FFFFFF; font-family: Arial; text-decoration: none; font-weight: bold;position: absolute; top: 185px; left: 40px;} --> </style> </head> <body bgcolor="#FFFFFF"> <img src = "Installer.jpg" id="img"><br><br> <a href="Chain-e Link Client Setup\dotnetfx.exe" class="1">Install .NET Framework 1.1</a> <a href="Chain-e Link Client Setup\Setup.exe" class="2">Install Chain-e Link Client</a> <a href="Chain-e Link Server Setup\Setup.exe" class="3">Install Chain-e Link Server</a> </body> </html> the background image displays,, but the links dont.. anyone got any suggestions? thanx in advance Hi, I am designing a small website for a friend and decided to use Ajax on one of the pages: http://122.201.74.87/~natural/treatments.html Problem is in firefox the white background (cell) doesnt extend with the ajax cell so the text just runs down the page over the purple background. But if you look at the page in internet explorer the white background (cell) extends and collapses with the ajax cell like it should. Can someone have a quick look at this and let me know what changes i should make so it works in firefox like it does in IE. PS. Yes the coding is nothing special because it is just a quick site i put together for a friend. Thanks. Hey guys, I'm brand new to HTML and am teaching myself. I'm right in the middle of studying and have run into a problem. I've been working on my PC up until now but had to transition over to my Mac because it has Photoshop installed on it. I've been trying to open my HTML in Firefox but it isn't working. When I open with Firefox, all it does is bring Firefox to the front but doesn't open my HTML. I've done the same thing in Safari and it displays my code with no problem. Does anyone know what is causing this? Thanks in advance! Is there a good old fashion way (simple HTML) to make the bottom of my webpage content all meet evenly at the bottom? The problem is that the bottom of my webpage looks different in FireFox versus Internet Explorer. In Firefox, the bottom contents all meet evenly at the bottom. However, in Internet Explorer, the Center content looks shorter than the Left-Side and Right-Side Content, hence making it look uneven and jacked up... I'm using .shtml and templates for the Left-Side and Right-Side of the Site. The Center content is inside the index.shtml file. Thanks so much in advance for your help. I greatly greatly appreciate your help. Howdy everyone! I'm a noob here and I'm at my wits end. The real problem here is that I know just enough to get myself into trouble, but no concept on how to dig myself out of it. The website I'm working on is he http://www.psychological-warfare.com My problem is that it looks OK in Explorer, but looks like a trainwreck in Firefox. It was designed by retrofitting a template I bought years ago, so it's like trying to decipher the amatuer translation of a Russian mad scientist's codex. I apologize in advance. I've been moving DIV's back and forth for days and Explorer doesn't seem to care. Things just keep getting worse and worse in Firefox. I think the main issue is that I have a left column and then the header that spans the middle and right columns. I can see how Firefox might hate that... The next problem (and I'm hoping someone might have an idea on this): I used a modern header calling this whole mess XHTML. I know exactly squat about the differences between HTML and XHTML except that XHTML loves to have everything "/>"ed. Would all of this work if the header called it transitional HTML and give myself a little leeway? What code should be at the top of my page? Thanks everyone for the help. I wish I could buy everyone a beer! Hey all, I'm having a bit of trouble applying the style keyword to get it to work in firefox. It works fine in internet explorer. my code is: <table style="position:absolute;left:220;top:155" > as in it doesnt position the table in absolute, it still puts it UNDER any text rather than applying the position any ideas as to why this isnt working in firefox? is there an equivelent I can use to position a table on the screen? Why Does Alt Text in the html img Tag Not Work in Firefox? It works well in IE but not in Firefox. Anyone knows why? Thanks in advance. Hi, i have created two radio buttons to run 4 functions in my javascript. these run perfectly in IE but dont work in Google Chrome or Firefox! i really need this resolving. Please help. The Javascript is: <script type="text/javascript"> <!-- } function changetextcolor() { document.getElementById('textbtm').style.backgroundColor = '#ffffff'; } function changetextcolors() { document.getElementById('textbtm').style.backgroundColor = '#ffff00'; } function change_background(){ backgroundv=document.getElementById('backgroundimg').value; document.getElementById('background').innerHTML='<img src="place/images/backgrounds/white.png"/>'; } function change_backgro(){ backgrov=document.getElementById('backgroundimg').value; document.getElementById('background').innerHTML='<img src="place/images/backgrounds/yellow.png"/>'; } //--> </script> The HTML coding is: <input type="radio" class="poll1" name="backgroundimg" onClick="javascript:change_background();changetextcolor();" checked> <input type="radio" class="poll2" name="backgroundimg" onClick="javascript:change_backgro();changetextcolors();"> Please help me! Hi there im trying to make a menu sytem for a website and keep coming across the same problem it seems to work fine in IE but in firefox has a 4/5 pixel margin underneath that its really irritating me http://danielbourne.net/pdwcs/1/aboutest.html can anyone see any errors within there that i may have missed ? the menu css is within http://danielbourne.net/pdwcs/1/default.css any help is much apreciated thankyou Daniel Bourne Hi, I'm just learning html and I'm creating my website in Frontpage 2003. I looked in IE6 and my individual pages are exactly how I want them to look. However, viewing the same pages in Firefox presents me with a problem I'm not sure how to correct. It has to do with the center table. I originally copied and pasted the contents from Excel into the table (which I think was a mistake now). My workaround to this was copying and pasting the contents in the table into Notepad; and also shortening the length of each line; and then re-pasting the contents back into the table. It looks o.k. in Firefox but the alignment is no longer "justified". Can someone please tell me what I should be doing in the html code here? To see what I mean please open the link below in both IE and Firefox. http://www.prosperityteachers.com/ne...ew_thought.htm Much appreciated! In a website i'm designing, there is a slideshow I created, and instead of using flash I used Windows Media Player. For some reason the html border attribute on both the <embed> and <object> tags, when viewed in Firefox, do not work. Page with border problems here is the code, if you want it: Code: <center> <object id="MediaPlayer" width="800" height="650" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" title="Pete's Mountain Road Slideshow" border="3"> <param name="filename" value="http://www.petesmountainroad.com/PetesMountain.wmv" /> <param name="Showcontrols" value="True" /> <param name="autoStart" value="False" /> <param name="wmode" value="transparent" /> <embed type="application/x-mplayer2" src=http://www.petesmountainroad.com/PetesMountain.wmv" name="MediaPlayer" autoStart="False" wmode="transparent" width="800" height="650" title="Pete's Mountain Road Slideshow" /> </object> <br /> <p class="main">If you do not have Windows Media Player, you can view the video by following <a class="Link" href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx" target="_blank" title="Download Windows Media Player 11">this link</a> to download the program to your computer, then try to play it again.</p> </center> </body> </html> Can anyone help me figure our why the side menu is missing when I added HTML code. If I take the code away, the side menus appear. Thanks! Here is the page http://www.tedskitchen.com/Side/Cate...r/Lo_Mein.html Code: <div id="container"> <div id="indexHtml1" style="position:absolute;left:430px;top:200px;width:700px;z-index:80"> <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe"> <font face="Arial" font size="1" color="#8B000"> <h1 property="v:name">Chicken Lo Mein</h1></font><br><br><br> <img src="/images/Lo_Mein2.jpg" style="position:absolute;top:80%;left:1%;margin:-83px 0px 0px -200px;" rel="v:photo" width="130" height="110" right="300"color="#8B000"/> <font face="Arial" font size="1px"> <div style="position:absolute;left:1px;top:38px;width:700px;z-index:60;> <span property="v:summary">Boiled Chinese noodles, in a tangy sauce,</span><br/> <span property="v:summary">stri fried with Chinese vegetable.</span><br/><br/><br/> <br/> <br/> <font face="Arial" font size="3px"> <div style="position:absolute;right:195px;width:700px;top:90;z-index:60> By: <span property="v:author">Photo by: Suat Eman</span> <span rel="v:Review"> <span typeof="v:Review-aggregate"> <span rel="v:rating"> <span typeof="v:Rating"> <span property="v:average">4.0</span> stars based on <span property="v:count">35</span> reviews </span> </span> </span> </span> <br/> <br/> <font face="Arial" font size="2px"> <div right:200px;width:700px;z-index:60;> Prep time: <span property="v:prepTime" content="PT30M">30 min</span> Cook time: <span property="v:cookTime" content="PT1H">30 min</span> Total time: <span property="v:totalTime" content="PT1H30M">30 min</span> Servings: <span property="v:yield">6</span><br/> <br/> <br/> <br/> <font face="Arial" font size="3px"> <span rel="v:ingredient"> <span typeof="v:Ingredient"> <span property="v:amount">1/2 lb</span>: <span property="v:name">Chinese noodles</span> <br/> <span property="v:amount">1/2 lb</span>: <span property="v:name">Cooked chicken (chunked), shrimp or pork</span> <br/> <span property="v:amount">1 bunch</span>: <span property="v:name">fresh green scallions</span> <br/> <span property="v:amount">1 knob</span>: <span property="v:name"> fresh ginger</span> <br/> <span property="v:amount">3-4</span>: <span property="v:name">cloves garlic</span> <br/> <span property="v:amount">1 lb</span>: <span property="v:name">bean sprouts</span> <br/> <span property="v:amount">1/2 cup</span>: <span property="v:name">pea pods</span> <br/> <span property="v:amount">1/2 cup</span>: <span property="v:name">shredded Chinese cabbage</span> <br/> <span property="v:amount">2 1/2 tablespoons</span>: <span property="v:name">soy sauce</span> <br/> <span property="v:amount">2 1/2 tablespoons</span>: <span property="v:name">hosin sauce</span> <br/> <span property="v:amount">1 teaspoon</span>: <span property="v:name">cornstarch</span> <br/> <span property="v:amount">1/4 tablespoons</span>: <span property="v:name">sea salt</span> <br/> <span property="v:amount">3 tablespoons</span>: <span property="v:name">peanut oil</span> <br/> <span property="v:amount">1 tablespoon</span>: <span property="v:name">dry sherry</span> </span> <br/> <br/> <br/> <br/> <div property="v:instructions"> 1. Boil noodles according to package directions; rinse briefly under cold<br/> water and drain set aside.<br/> 2.Slice scallions lengthwise then into 1 inch longs pieces.<br/> Wash and peel ginger, then grate using a fine grater.<br/> Peel and finely mince garlic. Wash bean sprouts well in cold running water.<br/> 3.In a small bowl, combine soy and oyster sauce, salt and cornstarch.<br/> 4.Heat peanut oil in a large wok or skillet until sizzling hot.<br/> Add pork, onion and ginger, stirring constantly for 1 minute.<br/> Add garlic, and sherry; stir in bean sprouts<br/> (and other vegetables and shrimp, if using) and soy sauce mixture.<br/> 5.Quickly stir in noodles and stir fry for 3 minutes<br/> </div> </div> </div> </div> </div> </div> </div> </div> </div> Hi, I just changed some content in the middle of a oscommerce php page that I have been working with for a couple of years. I frequently add or change content in a table in this page. http://www.leavemeb.com/index.php Today, I added new stuff, pics, etc and used percentages in the tables to space things out well and so that when someone expands or condenses the browser window, the content adjusts accordingly. Now, in IE it shows up perfectly, yet in firefox on my mac it is very spaced out and can't even fit the whole page across without me having to scroll to the right to see the right collumn. Can anyone help me see what is not working here? I would be very grateful. I can't seem to see it. Nichole |