HTML - Browser Differences.... Im Very Stuck!
Good morning/afternoon/evening good people of these forums!
I have a big problem that i cannot for the life of me fix!! I have made a small microsite for a customer, It is incomplete at the moment because it is still a visual idea, however the differences between Internet explorer and firefox are HUGE!, It works totally fine in IE but in Firefox quite a few images and Swfs are missing!! Can someone try and help me out, i am very very very stuck!! The link is: http://content.thisis.co.uk/gloucest...mes/index.html Thanks in advance! Matt Hurley Similar TutorialsHi, started making a website today. And since I'd like every one to see it properly I check both in MIE and FF. For the first time, I see MIE do something better then Mozilla -.- I built my frontpage in table-layout with sliced images. But I get a gap in FF. This does not occur in MIE. Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Rebits :: Welcome</title> <style type="text/css"> <!-- body {text-align:center;} #nav {list-style:none; word-spacing: 50px; font-family:verdana; text-align:left;} a:link {text-decoration:none; color:black;} a:visited {text-decoration:none; color:black;} a:hover {text-decoration: underline; color:white; background-color:black; } li {display:inline;} #copyright {text-align: right;} #bigkonijn {position: absolute; top:200px; left:240px;} --> </style></head> <body> <img id="bigkonijn" src="rebit-big.gif" width="300" height="500" alt="rebit-big (15K)" /> <table width="200" border="0" cellspacing="0" cellpadding="0" > <tr> <td colspan="2" style="margin:0px; padding:0px;"><img src="header.gif" width="800" height="155" alt="Header" /></td> </tr> <tr> <td colspan="2" style="background-image:url(nav.gif);padding-top:0px; margin-top:0px;"> <ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="begin.htm">How-it-started</a></li> <li><a href="commov.htm">Comics&Movies</a></li> <li><a href="contact.htm">Contact</a></li> </ul> </td> </tr> <tr> <td><img src="left-front.gif" width="414" height="408" /></td> <td><img src="welcome-right.gif" width="386" height="408" /></td> </tr> <tr> <td colspan="2" id="copyright"><small>(c) Artem</small></td> </tr> </table> </body> </html> Any ideas how to fix this in FF. Ps. I think this might be a problem of FF to make own margin-padding, but I don't know where exactly to put 0-values. If you visit http://jacobkelleydesigns.com/other/SE/index.php in Safari, the menu is lined up correctly, yet in Firefox, the contact button drops below the other buttons, leading me to believe the width in the css is incorrect, but it works well in Safari. If I changed it to be wider, it'd work in firefox but not safari I'm assuming. Here is my style sheet. CSS What could be causing this? Lo folks. I seem to have come accross another situation where IE7 and FF2 can't agree on a method to display things. However, this time, I have a feeling IE 7 is doing it right. I am using a list in a list to achieve the desired effect, which is that my main list points have some list points each outlining the point further. Take a look at these two images too see the difference: Microsoft Internet Explorer 7: Mozilla Firefox 2: The first one is how IE treats it, which adds indent to the nested list, which is how I mean it is supposed to be. The second one is how Firefox treats it, which does not add an indent, or only a very small one at best. Can anyone tell me what the specs say about this? And how do I correct it? As I mentioned, I want it like IE shows it. The page in question is: http://www.sheenakelly.com/workshops.php The css is located in: http://www.sheenakelly.com/include/style.css *Edit: And now when I try validating this particular page, I get a validation error with my UL / LI that makes no sense to me... can this be a part of the mess? Ta. H. I'm revamping my community website. The existing set up is a plain HTML page with CSS which links to a phpBB forum. I'm now experimenting with getting the phpBB calendar to appear on the community homepage. So, I've converted the plain HTML to a PHP file. The coding looks correct, but now the styles are messed up somehow, but only for IE. I'm using IE6 and FF2. Under FF2, the page looks fine. Under IE6, the centeredness is all whack. Can someone take a look at the page and give me some suggestions on how to make IE render it properly? http://shawnessy.ca/test.php Thank you! Hi everybody, On our website we have a page that looks great in IE7 but doesn't look so good in Firefox. http://www.jjdog.com/contestmain.shtml We used DIV tags around the tables to format the page with CSS. I have been looking at our code but don't have a clue how I could go about fixing this so it looks good in Firefox too. Any suggestions? Best Regards, Eli Hi, I'm currently coding my website and I've ran into a slight issue...I've got a series of nested div's, making a 'tutorial' list (look at www.designersvault.net to see). Problem is in Firefox 3, the list appears way further down than it should, but in Internet Exlporer 7 it renders the way I want it to. The source code is on the website www.designersvault.net Many thanks Hi, I know this is quite a common and problem, and it is one that often make me want to pull my hair out! The problem this time is that my problems arise from a database generated layout. In that, depending on how many fields are in a database, my code will display a number of small divs. When viewed in firefox it displays perfectly as I would want, but in I.E it goes all funny. Here is the code Code: <?php mysql_connect("localhost", "0607197", "12345") or die("Can't connect to database server!"); mysql_select_db("db0607197") or die(" Can't select database!"); $updated = FALSE; if(count($_POST) > 0){ $admin = $_POST['admin']; array_map('intval',$admin); $admin = implode(',',$admin); mysql_query("UPDATE seats SET admin=1 WHERE id IN ($admin)") or trigger_error(mysql_error(),E_USER_ERROR); $updated=TRUE; } ?> <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post"> <?php ?> <?php $booked = "<b>Seat Booked</b>"; $sql = "SELECT id,username,admin,rowId,columnId FROM seats ORDER by id ASC"; $result = mysql_query($sql) or trigger_error(mysql_error(),E_USER_ERROR); while(list($id,$username,$admin,$columnId,$rowId,)=mysql_fetch_row($result)){ if($admin==1){ echo '<div style="background-color:red;align:center;width:53px;text-align:center;padding-top:5px;padding-bottom:5px;float:right;height:43px;border:2px solid #FFFFFF;"><b><font color="black">'.$rowId.''.$columnId.'</div>'."\n"; } if($admin==0){ $checked = ($admin==1) ? 'checked="checked"' : ''; echo '<div style="background-color:green;padding-bottom:5px;align:center;width:53px;font-weight:bold;text-align:center;padding-top:5px;float:right;height:43px;border:2px solid #FFFFFF;"><b><font color="black">'.$rowId.''.$columnId.'<input type="checkbox" name="admin[]" value="'.$id.'" /></div>'."\n"; } } ?> <p><div style="float:bottom;text-align:center;paddin-top:40px;"><input type="submit" name="submit" value="Book Seat" /> </div> </form> Could this be solved by some simple CSS? Position:absolute perhaps or will I need a better, more efficient way of outputting the data? Advice please. Thanks in advance Daniel Refer to the following: Screenshot: http://i41.tinypic.com/qzgkee.jpg Direct URL: http://www.brightfusehosting.com/2010/ First, I want to remove the yellow. Note how I want to make two tables at the bottom separated. If you can think of a more user friendly way of doing so, I'm all ears. The red block I want to make into a php include, but I can't figure out what I need to yank out of the HTML to make it happen. This is a templatemonster.com layout. Im making an auction site and everything seems to work fine. When I went to a site that checks my html and such it looks like a wreck. Im not sure im checking it correctly or with the correct type validation. It shows 100's of errors. That's one concern. Other things like appearance and form fields being inserted in my html pages is another area I am lost at. Where I am stuck the most is, I know there is a better way to make everything work. Im really having trouble with the idea portion and then of course the execution may or may not be within my abilities. The auction script is hosted on the owners servers and I basically just create an html page and split it in between the head tags and insert it inside the site and the program integrates it into the php auction script. In the end the log-on page (calender) is my html page. Once you enter an auction the html I inserted into the auction script takes over. The kind of things I was wanting to do I think are easy I just dont know how to explain in a short way. For example the auction script is pretty much self contained. It could run by itself. Or it can be edited in different ways. Everything is just fill in the blanks and once published it is a basic ugly layout. Or I can turn off the feature and manually create it myself in the html pages. This is tedious and could cause a lot of mistakes to be made. The script owner just says keep it simple and basic. This is good advice for most. I just want to keep it easy not so much simple. If I could get the text fields I enter into the auction to show up on my html main page (calender) and have my css control the looks that would be ideal. The calendar page is just what it says a calender of auctions with descriptions, dates, details about the up coming auction. All of that is typed into the backend of the auction script and it will make a basic text of it on the screen if I allow it to be seen. Instead I just dont refer to it in any of my html and manually type the data into my calender page. So for starters it would be great if all of that could come from the auction and automatically update the html page through a cron job or something. lol.... now Im really trying to get carried away. This is one of those scripts you would just have to look at to fully understand. It is called Maxanet. It looks like it has a lot of editing options, its just the instructions never say what you can really do as far as editing goes. All of their sample auctions are bare bones. I can fin examples of what it can do or what I can put in my html to take advantage of it and create a professional look. Back to my initial concern. when I try to validate my css html it looks like not a single line is correct. I dont know if I am doing the validation correctly. Im ure there are a lot of errors just the ones it says so far dont make any sense to me. Like it wa written in another language to me...grin If anyone is interested in looking the site is nexusonlineauctions.com I welcome any advice good or bad. The html is something I did combining differnt things from differnt places. The drop down menus would love to know if there is a way to make them match up to the actual auctions. So auction one will automatically make that drop down say Auction 1 and so on for each auction. Completed auctions and such anre archived in such a way that they will stay named the same forever once theyare completed. Active auctions are put into what they call a work space and the work space is re-used after the completion of the auction and has a fied that contains the auction name. Gosh I could go on for weeks trying to explain this stuff. SInce my knowledge is so limited I am never going to explain it properly. Hi guys, Im only new to html coding and as a project my lecturer wanted me to create a tutorial for his website. the Html coding is reference a javascript file and CSS file. when i try the website offline (running the simulation) it works fine. but once i upload it to the dotnetnuke website the next button seems to be stuck on the first page. heres a sample of my coding. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/Portals/0/Simulator/OSI/mystyle.css" /> <script type="text/javascript" src="/Portals/0/Simulator/OSI/jscript.js"></script> </head> <body> <header> </header> <!--selecting multiplexing style--> <nav> <table> <tr> <td> <form action="../cgi-bin/redirect.pl" method="POST" onsubmit="return dropdown(this.gourl)"> <select name="gourl"> <option>Select Simulations..... <option value="OSI.html">7 OSI Layer </select> <input type="submit" value="Go" /> </form> </td> <td id="right_nav"> </td> </tr> </table> </nav> <!------------------------Intro-------------------------> <div id="main1"> <div > <table id="maincanvas" <tr> <td id="nextback"> <input type="image" src="/Portals/0/Simulator/OSI/backf.png" /> </td> <td> <!--Pagecontent--> <div id="middle"> <p style="height: 90px"></p> <div id="fade2" style="font-size:70px; color:Gray">OSI Simulation</div> <div id="fade2" style="font-size:20px; color:Gray">The Seven Layers of OSI</div> <div style="margin-left:550px" id="ifade">Click to Continue <img src="/Portals/0/Simulator/OSI/rhand.png" /></div> <p style="height:140px"></p> <div style="font-size:12px"><b>Disclaimer: </b>This simulator is still in the active stages of development. To enjoy the full experience of this simulator, please download the newest version of <a href="http://www.google.com/chrome/">Google Chrome</a> and enable javascript.<br /> </div> <div style="font-size:12px; margin-left:650">beta 1.0</div> </div> </td> <td id="nextback"> <input type="image" src="/Portals/0/Simulator/OSI/next.png" class="zoom" onclick="displayNext(2)" /> </td> </tr> </table> </div> </div> i use an external javascript file function displayNext(newPage) { var newString = "main" + newPage; var oldString = "main" + (newPage - 1); document.getElementById(newString).style.display = "block"; document.getElementById(oldString).style.display = "none"; } Hi how do you do like a password protection bit on the site, do you set it up as a from and if so how is that.... Thanks in advance Max Hello all, I am so stuck with customisation of my Tumblr account. I have added a custom header/banner to the page but the object (arrow) to link into each post is lost under the the header banner (I'm assuming) You can see what I mean by seeing a normal one first; http://organ-theme.tumblr.com/ Then looking at mine. http://valvechild.tumblr.com/ How do I change the relative position of the linking arrows that appear so that they appear in an accessible spot above the posts as usual? Thanks for any help. Mark. Hey guys, I hope someone can help me out. Im validating my xhtml but have come across an issue im stuck with. Line 97, column 5: end tag for "li" omitted, but OMITTAG NO was specified Line 97, column 5: end tag for "ol" omitted, but OMITTAG NO was specified Line 82, column 5: end tag for "ol" which is not finished Line 43, column 35: document type does not allow element "div" here; assuming missing "li" start-tag HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en"> <head> <title> yes</title> </head> <body> <div align="center"> <table cellspacing="0" cellpadding="0" width="500"> <tr> <td> <div align="left"> <form name="form" action="" method="post"> <table style="WIDTH: 500px" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="left"> <div align="left"> <h3>What are you doing?</h3></div></td> </tr> <tr> <td class="update_box"> <p align="center"> <textarea id="content" rows="5" cols="10"></textarea> </p> <p align="center"> <input class="comment_button" id="v" type="submit" value="Update" name="submit" /></p> </td> </tr> </table> </form></div> <div id="flash" align="left"> </div> <ol class="timeline" id="updates"> <div id="old_updates"> <table width="100%"> <tr> <td colspan="4"> <hr style="COLOR: #6d7b8d; HEIGHT: 1px; BACKGROUND-COLOR: #a9d0f5" /> </td> </tr> <tr> <td valign="top" width="10%" rowspan="2"><img height="40" alt="Pic" src="http://www.gravatar.com/avatar.php?gravatar_id=7d09b47edf3bdbedb4cb104fb507c3df" width="40" border="1" longdesc="http://www.gravatar.com/avatar.php?gravatar_id=7d09b47edf3bdbedb4cb104fb507c3df" /></td> <td valign="top" width="12%"><strong>Jarratt</strong></td> <td valign="top" width="63%"> gg....270</td> <td valign="top" align="right" width="15%"><a class="delete_button" id="270" href="#"><span style="FONT-SIZE: 10px; COLOR: #ff0000">X</span></a> </td> </tr> <tr> <td colspan="3"><span class="feed_link"><a class="comment" id="270" href="#">comment</a></span> <span style="FONT-SIZE: 10px; COLOR: #a9a9a9"><b>Yesterday</b> at 4:15 pm - ID = ...270</span> <div class="view_comments" id="view_comments270"></div> <table width="80%"> <tr> <td> <div id="commentload270" > </div> </td> </tr> </table> </td> </tr> </table> <ol id="update" class="timeline"> </ol> <div class="comment_box" id="c270"> <form name="270" action="" method="post"> <textarea class="text_area" id="textarea270" rows="5" cols="10" name="comment_value"></textarea><br /> <div> <input class="comment_submit" id="id270" type="submit" value=" Comment " /> </div> </form></div></div> <div class="morebox" id="more270"><a class="more" id="270" style="DISPLAY: block; WIDTH: 100%" href="#">more 270</a></div> </td> </tr> </table></div> </body> </html> Hey guys. At the moment i have made a 100% colored table. What i am trying to do is add a 1px colored border to the top of the table and a 2px colored border to the bottom of the table. Ive tried several different approaches but i never get the result i am looking for. Can anyone help me out with this? Here is my code: Quote: <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr bgcolor="#000033"> <td align="left"><font face="Arial, Helvetica, sans-serif" size="6"><b><font color="#FFFFFF"> <a name="top">Title</a></font></b></font></td> </tr> James Ok i have all my html codes my index.html and everything now i just need to know how do i host it? im going to use http://www.dot.tk to host it but how do i take my raw html files and host it to a domain? Thanks! Ok i have all my html codes my index.html and everything now i just need to know how do i host it? im going to use http://www.dot.tk to host it but how do i take my raw html files and host it to a domain? Thanks! Hello all, I am encountering a bizarre problem that I've never seen before. My a:visited color has suddenly turned white and refuses to display in the color I set. Code: a, a:visited{ color: #0181b4; text-decoration:none; } a:hover { color:black; } I have tried several ways to set the visited color to blue. If I specify it in the <head> of the page using <style>, it works. If I specify the class, .browselist, with the a:visited, it works. But if I try to set it as above, the usual way, it turns white. Strangely, the css behaves itself in the Dreamweaver live preview, but not in Firefox, Safari, Opera, or Chrome. I could just use the workaround but it's sloppy code and other people will have to work with this file. It's embarrassing! Does anyone have an idea of what's going on? I'm grateful for any help you can offer. ok, ive tested this several ways and im stuck, ive coded the PHP navbar pretty much the same as the HTML version of my site.. but in th PHP page it wont show. I think the sprite is confliction in some way, dont see a way to put my finger on it: It concers this page, the red square. the whole Navbar: Code: <ul id="navigation"> <!-- SVIB ww / er --> <li><a style="background-image:url('img/nav/4back.png'); width:81px; height:80px; position:relative; border:solid 2px red;" id="bol_4" href="?page_id=2">back</a></li> <li><a id="bol_1" href="?page_id=187">1</a></li> <li><a id="bol_2" href="?page_id=189">2</a></li> <li><a id="inloggen" href="inloggen.php">3</a></li> <li><a id="bol_3" href="?page_id=55">4</a></li> </ul> and the CSS, which is pretty important in finding the error i believe: Code: #navigation { padding:0; margin:0; list-style-type:none; margin-top:-511px; margin-left:560px; } #navigation a { display:block; width:131px; height:128px; background-image:url(../img/nav/svib_compleet_sprite.png); text-indent:-9999px; outline:none; } /*TERUG*/ #bol_4 { width:40px; height:81px; position:relative; top:4px; left:4px; border:0; } #bol_4:hover {background-position:81px 0;} Hey everyone, I'm having a problem with a Flash .swf file in my HTML page. If I input the code one way, it works in Firefox and not in IE. If I do it another way, it works in IE and not Firefox. The approach I was thinking of taking was using conditional statements in Javascript, however I'm having problems arranging the code to properly implement it. And believe me, I've reworked this file and I'm getting nothing that works on both at the same time. Suggestions for both methods would be great -- If you'd like me to post the code I could do so. Thank you! Hello! I'm kinda stuck trying to get this idea on HTML for my web site: www.luzvenidera.com/webnueva/indexinframe.htm This is the thing: I want the content to appear in the main rectangle, and have it resize automatically to the content. I have been able to do this with an inframe and using a specific script. Next to the content there are cells with an image that should go on the top of each cell and a background tiled image that continues the pattern. At least on my computer, the current code works in IE7, but in FF3 the image inside the side cells ends up showing in the middle instead of the top. I have also read that using inframe isn't really a good idea for the main content section of the page, for a variety of reasons including that it's not search engine friendly, so I'm trying to figure out an alternative.. I'm stuck here. If I make an entire frame beneath the navigation bar and just add the content there then the scroll bar would only show up for that frame, that is, beneath the navigation bar. I want the whole page to have the scroll bar, I don't want the header and navigation bar to stay in place while the rest of the content is scrolled as the background in the sides would break. My questions would be: what should I do to make it so I have the content in a frame, having it expand so the content would fit, without screwing up the side bars and making the whole page scrollable to read the content? I really don't want to make an instance of the whole page tailored to each section's content. I'm also getting ActiveX warnings in IE that prevent the inframe to show up unless it's manually permitted.. if I'm forced to use inframe, is there any way to prevent this? I hope I'm being clear, and would really appreciate any advice! I'm new to most of this stuff, and I got a big headache trying to figure this one out! Thanks in advance! |