|
HTML - Fixing Ie Issues On A Firefox Built Website
Hey all,
I was wondering if anybody had any pointers on this website I've been building. It looks alright so far in Firefox, but I've had some issues in IE. The link is: http://www.totaros.com/totaros new/index.html Specifically, -The image distortion on the menubar-what are the best types of images to save these as for compatibility in IE? -The menubar not resizing in IE with different resolutions -Aligning text next to pictures (such as on the Entertainment page). This works in FF, but not in IE. -Any other problems noticed. Thank you! Similar Tutorialswoops terribly sorry guys for my first post being a false alarm, i experimented a bit and fixed it. Hello. I'm back again. This time I have a different problem: Because the text sizes in IE are much smaller than in Firefox, the alignment of certain divs comes out disarranged. Notice that in FF, the big red box's position begins at midpoint of the contact us navigation. But, in IE it begins a big close to the end. I think this is due to the different text sizes. I was wondering if I could use javascript to test which browser is currently being viewed, and base on the browser type it would switch between css to correct the differences? (Sorry for the overly huge images) Also, I'll post the code later. Hi this is my first website its part of a school competition, my problem is that i cannot get it to work with IE, the javascipt refuses to run and I dont know where its going wrong. Also is there a way to do drop shadows quikly in IE, or will I have to put in alpha gradiants, I fear they may be extreemly hard to do, due to the nature of the dynamicaly resizing divs. http://www.f1octaneracing.com/index.html Hello. =) I'm trying to create a small website for my family, and I want to incorporate this drop-down menu from Sons of Suckerfish. I had some help altering the menu a bit, but I'm still having a few problems. =( I'm testing my site in as many browsers as possible, and I came across two major problems: Problem #1: The Top Menu It doesn't work in IE6. The menu keeps jumping VERY far to the right. Also, the words "Home", "By Year", etc. should change color when hovered on. You can observe the differences between IE6 and Firefox below, in these images I made: Menu (mouse issues; example #1) Menu (mouse issues; example #2) =================================== =================================== Problem #2: The "Thanks" Section My "Thanks" section isn't looking right, either. For some reason, Netscape won't space the image away from the text: Image (how "Thanks" page looks in IE, Firefox, and Netscape) I know Netscape Navigator is pretty much "extinct" now, but I'm still curious to know what the problem is. I'm guessing the problem is the "display: inline-box" code in my DIV tag. Is there another code I can use to fix this problem, or maybe there's a hack I can use for Navigator? Or...should I stop using DIVs and acheive the same effect another way (like with a table or something)? I really hope someone can help. Thanks in advance! Hello, I am trying to design a website for my fathers company and I am having some issues with the photogallery section. I used a template for the overall design, and when I want to add pictures horizontally it screws up all the images with their space in between them as well as the alignment of the whole website itself. Any help would be most appreciated I am trying to do this as a surprise!!! The website is: www.ckmjconstruction.com Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hello, My website works fine in IE but when i open it in Firefox the small square images don't show up - can anyone give advice on what is causing this and a fix for it? http://www.turbulenceurbanwear.com/leilani.htm Thanks for your help Hello, Having issuse with the browsers. Firefox I am all good but when I look at IE7 one page stops reading my CSS. I have NO idea y. PLEASE HELP!!! Using the following code column within my datagrid. It gives me different results within firefox and IE. It should show some text and then the image should appear after the text. Within IE 7 it works fine but within firefox 3.6.10 the image is directly over the text. I'm not using a CSS file. This is a page I inherited and I'm asked to fix this. Any help would be appreciated. Code: <asp:templatecolumn headertext="Name" headerstyle-width="90px" sortexpression="varName">
<itemtemplate>
<asp:label width="10" id="lblName" runat="server">
<%# DataBinder.Eval(Container.DataItem,"varName")%>
</asp:label>
<img src='/Images/Info16x16.gif' border=0 />
</itemtemplate>
</asp:templatecolumn>
I know that means I have some errors in my code, but Im having trouble spotting them. The background isnt working right in Firefox and Opera. Link: http://killinghookers.net (Code has been changed slightly. View the source on the page for the latest code) For some reason as well, the copyright information isnt staying at the bottom of the page but is floating left of the main content under the right nav column. After messing around this is what I have: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Title" content="RSGOD.NET HOME" />
<meta name="author" content="I Hate My User Name">
<title>RSGOD.NET HOME</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="page">
<div id="logo"></div>
<div id="nav">
<ul>
<li><a href="/" title="Home">Home</a></li>
<li><a href="http://www.killinghookers.net/forum" title="Visit The Forum">Forum</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
</ul>
</div>
<div id="side_left">
<div id="side_cat_title">
Navigation
</div>
<font color="#000099"><p>Home</p></font><br />
<p><b>Other Important Sections:</b></p>
<p> · <a href="http://www.killinghookers.net/forum" title="forum">Forum </a></p>
</div>
<div id="center">
<div id="cat_title">
News
</div>
Here's some news :)
</div>
<div id="side_right">
<div id="side_cat_title">
Useful Links
</div>
<p>· <a href="http://www.killinghookers.net/forum/index.php?act=Reg&CODE=00" title="Register to Enjoy the Benifits of Killing Hookers!"> Register </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?act=UserCP&CODE=00" title="Visit Your Profile"> My Controls </a></p>
<p>· <a href="http://www.killinghookers.net/forum" title="Visit the Forum"> Forum </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=36" title="Need a Game? Visit the Games Section!"> Game Downloads </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=39" title="Visit for the Best Movies!"> Movies </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=market" title="Market"> Store </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=sotw" title="Sig Of the Week"> Sig of the Week </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=7" title="Visit for Awesome Music!"> Music Downloads </a></p>
</div>
<div id="footer">
<p>
©2007 Killing Hookers.net
<br />
Coding Help (Lots!) by <a href="http://bbmodding.com/about.php" title="I Hate My User Name's Website">I Hate My User Name</a> <- Super Tech :)
</p>
</div>
</div>
</div>
</body>
</html>
Code: /*
+---------------------------------------------------------------+
| |
| CSS and HTML Designed by I Hate My User Name |
| Contact: ihatemyusername [at] hotmail.com |
| Do not reuse without my permission! |
| |
+---------------------------------------------------------------+
*/
body {
margin: 0px;
padding: 0px;
height: 100%;
/*Have to reset those terrible browser defaults*/
background-color: black;
width: 940px;
margin-left: auto;
margin-right: auto;
}
#wrapper {
width: 940px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*Creates our fixed width and the margins center it*/
background-image: url("images/wrapper.png");
/*Borders*/
}
#page {
width: 922px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*This has the actual page centered between the borders*/
background-color: black;
font-family: verdana;
font-size: 12px;
color: white;
}
#logo {
width: 922px;
height: 200px;
background: url("images/logo.png");
}
#nav {
width: 922px;
height: 28px;
background: url("images/nav_bg.png");
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
font-family: verdana;
font-size: 12px;
color: black;
background-color: white;
}
#nav ul {
margin: 0px;
list-style: none;
display: block;
float: left;
padding-left: 0px;
margin-left: 0px;
}
#nav li {
margin: 0px;
list-style: none;
display: block;
float: left;
width: 99px;
height: 22px;
padding-top: 6px;
padding-left: 0px;
margin-left: 0px;
border-right: 1px solid #808080;
text-align: center;
}
#nav a {
color: #333333;
text-decoration: none;
}
#nav a:hover {
color: black;
text-decoration: underline;
}
#side_left {
float: left;
width: 150px;
height: auto;
margin-top: 10px;
margin-left: 5.5px;
margin-right: 5.5px;
background-color: white;
color: black;
}
#center {
float: left;
width: 596px;
height: auto;
margin-top: 10px;
background-color: white;
color: black;
}
#side_right {
float: left;
width: 150px;
height: auto;
margin-top: 10px;
margin-left: 5.5px;
margin-right: 5.5px;
background-color: white;
color: black;
}
#cat_title {
width: 591px;
height: 19px;
background: url("images/cat_title.png");
font-size: 12px;
padding-top: 5px;
padding-left: 5px;
border-bottom: 1px solid #808080;
}
#side_cat_title {
width: 150px;
height: 19px;
background: url("images/side_cat_title.png");
font-size: 12px;
padding-top: 5px;
border-bottom: 1px solid #808080;
text-align: center;
}
#footer {
width: 940px;
height: 28px;
margin-left: auto;
margin-right: auto;
/*Creates our fixed width and the margins center it*/
background-image: url("images/footer_bg.png");
}
#footer p {
text-align: center;
font-family: verdana;
font-size: 10px;
color: white;
/*Borders*/
vertical-align: bottom;
height: 28px;
}
Help much appreciated. I was making the template for my friend and didnt realize the Firefox bug. Hi guys, I've been working on a website for a friend for a while now and thought I had it complete. That was until I opened it with IE! Things don't look right in IE - and also IE crashes when some pages are loaded. Any chance you could look at this page: http://www.flatvision.name/de/index.php in both IE & Firefox and offer some advice as to why it does what it does? Thanks very much - help and advice much appreciated. ! Leigh Hi Everyone- I'm hoping someone out there might be able to solve a problem I've been having with my site for a number of years. The site was designed for IE but with the growing popularity of Firefox and Safari (to name a few), I want to insure that it works properly with those browsers. For the most part, it does -- except when displaying a background image in a table. For example - look at this page: http://www.cygnus-x1.net/links/rush/...anentwaves.php When viewed in I.E., the grey background image with the woman displays properly, as does the full image of the album cover within. However when viewed in Firefox or Safari, the background image repeats near the bottom for about 20 pixels. The problem also exists on a page like this one: http://www.cygnus-x1.net/links/rush/lyrics.php Where the brown background image which includes the words "Rush Lyrics" displays properly in I.E. but seems to repeat for 20 pixels in FF. This one's been driving me crazy for years and, due to some recent changes I've been making, it's come back to haunt me. If anyone has any suggestions as to why this is happening and what I can do to remedy it, I would greatly appreciate it... Thanks so much. Hi - I got a small issue with onmouseover and clickable area on images in Firefox. Things work fine in IE but don't work correctly in Firefox. With firefox there seems to be dead areas where there shouldn't be dead and detects mouseovers were it shouldn't. Same goes goes for clickable area of the button image. Go here and click on the one button - http://www.agile-x.com/bridgeway/ then try the buttons at the bottom of the window that pops up in Firefox and IE. Thanks. 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! My website (3 below) looks different with Firefox than IE. The pics and text are not lined up correctly. I think it's because I used page breeze? Any pointers? Thanks. http://www.bringbackwendell.com/newsletter.htm http://www.bringbackwendell.com/links.htm http://www.bringbackwendell.com/gallery.htm My website (www.thebestpageyoullevervisit.co.nr) looks unorderly in Firefox, but looks fine in Internet Explorer. Some things that look unorderly are the tables which seem to move around, the text which seems to space out more than it needs to, and some words are pushed under pictures. Can anyone help? Is it possible to get this website to work in Firefox? When the window gets minimized smaller, it's supposed to stretch to fit the new screen (in IE it works) but in Firefox it doesn't resize right... is there any way for it to work in FireFox? http://www.clockwork-chaos.com/paperclover I had this problem before with the Firefox coding incompatibility.. On my website, I post updates for all of the changes I make about each month. I tried to post an update today and I noticed that it wasn't showing up in Firefox. I brought my page up on Internet Explorer and it shows up just fine. Point and case, there's something wonky with my coding again that is angering Firefox and its refusing to show my updates. Here's the 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Natalie's Cosplay</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div id="wrapper"> <h1></h1> <div id="head-1" style="WIDTH: 401px; HEIGHT: 386px"></div> <div id="nav"> <ul> <li><a href="http://www.geocities.com/lnyworikkukenm//index.htm"><font size="1">HOME</font></a></li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/Aboutme.html">ABOUT ME</font></a></li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/completed.html">COMPLETED COSTUMES</font></a></li> <li><a href="http://www.geocities.com/lnyworikkukenm/inprogress.html"><font color="#000000" size="1">IN</font><font color="#000000" size=1>-PROGRESS COSTUMES</a></font> </li> <li><font color="#000000" size="1"><a href="http://www.ultraguest.com/view/1180720057">GUESTBOOK</font></a></li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/links.html">RECOMMENDED SITES</font></a></li> <li class="last"><a href="MAILTO:Chinesefightinyo@aol.com"><font color="#000000" size="1">CONTACT ME</font></a></li> </ul> </div> <div id="body-left"> <h2><font color="#000000"><em><font color=#000000>G</font></em>al</font>lery</h2><br> Newest Costume: Songmage Rikku! <div id="gallery"> <div class="gal" id="gzero"><a href="http://geocities.com/lnyworikkukenm/songmage.html"><img height="163" alt="Latest Costume: Songmage Rikku from Final Fantasy X-2/Original Artist Concept" src="bigsong.jpg" width="221" ></a></div> <div class="gal" id="gone"><img height="41" src="song1.jpg" width =57 ></a></div> <div class="gal" id="gtwo"><img height="41" src="song2.jpg" width =57 ></a></div> <div class="gal" id="gthree"><img height="41" src="song3.jpg" width =57 ></a></div> <div class="clear"></div> </div> <table width="133" border="0" cellspacing="0" cellpadding="3" align="center"><tr><td align="middle"><a href="http://www.website-hit-counters.com/" target="_blank"><img src="http://www.website-hit-counters.com/cgi-bin/image.pl?URL=8421-4416" alt="free website hit counters service" border="0" ></a></td></tr><tr><td align="middle"><font style="FONT-SIZE: 9px; COLOR: #24092c; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none">Get a <a href="http://www.website-hit-counters.com" target="_blank" style="FONT-SIZE: 9px; COLOR: #444444; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none" title="free website hit counter">free website hit counter</a> .</font></td></tr></table> </div> <div id="body-right"> <h2 align="left"><font color=#000000>W</font>elcome!</h2> <p align="center"> <br><font color="#000000" size="1">Please don't use any of my photos without asking! If you have any questions or comments, please send me an e-mail! <br>Thanks! ~Natalie</font></p> <h2></h2> <div style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 300px"> <table cellpadding="0" cellspacing="0" style="WIDTH: 350px"> <tr> <td><font size="1" color="#000000"> (THIS IS WHAT IS NOT SHOWING UP!)~<u>July 3, 8:19 PM:</u><br><br>The coding problem was fixed awhile ago, and now I'm just messing around with some new graphics.. lol... Some of the stuff may be a little weird, but I'm having fun trying out new things with the look of the site still. <br><br>I'm leaving for AnimeNEXT on Thursday, and I couldn't be more excited. I have 2 new costumes, and I know I will have yet another awesome time in Secaucus!<br><br>(NOT SHOWING UP END) ~<u>June 1, 3:35 PM:</u><br><br>I'm aware that I'm having some coding issues with the main page, I appologize, and I'm working on fixing it. I posted my guestbook again onto a new server (so I had to add all of the old entries again.. >.<), I merged my in-progress and planned costume pages, and uploaded all of the photos I needed to for Caterina, Phoenix, and my new cosplay "Songmage Rikku".<br><br> ~<u>May 23, 2:41 PM:</u><br><br>I finally got my website hit counter back up (exciting I know), and I know that I still need to update the "About Me" page. I am working on 2 new costumes right now, as well as slowly getting some photos of my 2 latest costumes that obviously aren't up yet. So there will be lots and lots of photos posted in the next month or so!</font> </font> <p></p> <p align="left"><font color="#000000"><font size="1">~<u>May 3, 10:47 PM:</u></font></p> <p align="left"><font size="1">Anime Boston was <em>amaaaazing.</em> I have so many new photos that I need to post as soon as I get them all organized. I did wear my new Rikku costume, but I barely had anytime to wear it long enough for a good set of photos. I still need to get photos of that and Princess Venus, so that will be a separate update sometime during the summer.<br><br> I plan on making at least 3 costumes this summer (one being an original design.. FINALLY), so I'm super excited about that! More updates soon! </font> </p> </font></p></font></font></td> </tr> </table></div> </div> <div class="clear spacer"></div> </div> <div id="footer" align="center"> </div></a> <div></div> <div></div> <p align="center"> c 2007 Natalie's Cosplay<br> Template from <a href="freewebsitetemplates.com">Free Website Templates</a><br><br></p> <div></div> </body> </html> One thing I'm noticing is the large amount of (font)(p) tags all over.. Are they necessary? I'm afraid that if I delete a few of them where I don't think they are needed I'll have some more problems. ugh. |
|||||||