|
HTML - Firefox Issues (as Usual)
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. Similar TutorialsHello, 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!!! 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 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>
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. 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! 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! Hello, I am pretty new to the whole html world so forgive me if this is a simple problem. I have look all over for a post explaing this problem but i haven't found anything. I am making a site for a friend using Dreamweaver. I know i know, i regret not coding it from scratch but its too late now. Anyways I have a pretty good page layout going now but I have ran into a problem with loading my images. On my home page an image in a table nested inside another table will load when viewing in safari but seems to disappear in firefox. What is going on? Its a pretty simple piece of code. I place; <img src="Pictures/RDV couplepalm.jpg" width="200" height="" style="float:right; padding: 8px; margin-left:10px; margin-bottom: 10px" / inside of a paragraph in a row of a table. I have rewritten the code for this image, copied it from a working image and screwed around with the table heights (although I wasn't too sure what i was doing). What else should I try? I have attached screen shots of the site in both browsers a copy of the problem jpeg aswell as a copy of the html. Any information anyone could givee me would be REALLY appreciated! Thank you. Alright, so I have this site on which I need a certain part of the site (the content part where the main text bit is) to extend down to the bottom (and preferably no longer), so that if the window is smaller or bigger the text will still just go all the way down to the bottom of the page, and when the text is further down that div will have a scrollbar so you can scroll through the text. The main issue is making it so the end of the div is always on the bottom of the page. (I've tried height=100% on that div but then it just goes below the bottom for some reason.) This is the site. And here's the code: Code: CSS:
div.main { position: absolute;
top: 181px;
left: 110px;
width: 510px;
height: 1500px;
background: url("images/Content Box Bit.png"); }
div.news { position: absolute;
top: 25px;
left: 15px;
width: 494px;
height: 372px;
overflow-x: hidden;
overflow-y: auto; }
Code: HTML:
<div class="main">
<img src="images/News and Updates.png"><div class="news">
<span class="f4"><?php include('sitemapbase.php'); ?></span></div>
</div>
The reason the height of main=1500px is that that's not gonna be scrollable anyway, and I just added a random value to assure that went to the bottom no matter what. Thanks for any help. Wasn't really sure where to put this, sorry if it's the wrong place.. EDIT: Just encountered an additional issue, being that the navigation menus (to the left) look off in IE. The background seems not to start where the div starts. Suggestions? I have a page I created in dream weaver. It displays fine in IE7, but in IE6 it does not. Here is a link to the page: Problem Page If anyone has any ideas, I'd really appreciate it. Arg... IE is bugging me as usual.... Now I've been working on the fantasy football site the past few days getting ready for the fantasy season... but when I look at the site on IE we have a few issues going on... here they a 1. text rendering on the image switcher... why does the text look bold? The info there is using the default font-size of 13px which I set... I'm assuming that probably has something to do with it. 2. The poll part 1 Why on earth is the question indented 6px? The links in the "newest articles" section are set to indent 6px... but I set that on the list... the question of the poll isn't even in a list and it somehow got indented... 3. More crappy text rendering on the poll answers... now I'm seeing the results because I voted and the text looks absolutely horrendous... no idea why either. Any help with these IE crazy things would be greatly appreciated... thanks! I'm experiencing an issue when using DIVs in DIVs.. I have a container-DIV and a content-DIV, and I would like the container-DIV to stretch vertically as necessary based on how much content is in the content-DIV. Code: <html>
<header>
<style type="text/css">
#divContainer{
position:absolute;
top:10px;
left:10px;
height:100%;
width:200px;
background-color:#CCC;
}
#divContent{
position:absolute;
top:10px;
left:10px
width:180px;
background:color:#BBB;
}
</style>
</header>
<body>
<div id="divContainer">
<div id="divContent">
<!-- Fill me with content -->
</div>
</div>
</body>
</html>
This is basically the code I'm using... whenever the content amount pushes the divContent lower than the bottom of the divContainer, it just overflows out and down the page. What am I doing wrong? Edit: OOPS I set height to 100px on the divContainer, it was supposed to be 100% Right then... Problem is, uploaded website, thought that it was ok, checked in Firefox, Safari and even icab... did not check IE (rookie) and did IE have problems? Of course. Basically Some of pics are not showing up - mainly in the shop and one or two on the main pages. I cannot work out how to fix, def not broken links, really boring I know, but can anyone help? Link to site: http://www.thefrenchpantry.co.uk much appreciated... http://www.farewell-travel.com/newsl...rch2012_2.html Why does this look like crap in Internet Explorer? (Specifically talking about the "Highlights" box) It looks fine in firefox but not on IE. I've tried everything to fix it, I don't know what to do! The width dimensions for some reason are way off. It bloats up to 272px when it should be 200px! Please help! Thanks -Please note this is an e-mail newsletter, that is the reason I'm using tables! Hello! I'm having quite a problem implementing multiple backgrounds into my website. Simply put I want to have a top bar, that will function as header, and a bottom bar, that will function as a footer. I've tried the following solution but it just doesn't seem to work. The div id "bgBottomDiv" just won't show. I was hoping someone could help me out. HTML: HTML Code: <body> <div id="wrapper"> <div id="bgBottomDiv"> "Content goes here " </div> </div> CSS: Code: #wrapper{
position:relative;
margin:0 auto;
width:1100px;
}
body {
background-image:url(/images/Styler_top.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
#bgBottomDiv{
background-image: url(images/Styler_top.png);
background-repeat: repeat-x;
background-position: bottom;
}
Thanks in advance! I run a forum with a small progress bar under the user's avatar showing how far until the user achieves the next rank. The progress bar is simply an image resized based on the % of current posts to posts needed for the next rank. The styling of the progress bar is done entirely inline. <dd style="padding-left:5px; padding-top:2px;"> <div style="text-align:left; display:block; height:3px; width:80px; border:1px solid #DACDA5;"> <div style="height:3px; width:{postrow.RANK_LEVEL_SIZE}px; background: url('images/progress.jpg') no-repeat;"></div> </div> </dd> In Firefox and later versions of IE, the progress bar renders perfectly: In IE6 however, the bar is oversized and the padding is clearly off: Any suggestions on how I might correct the padding for IE6 would be greatly appreciated. I was going to create a seperate set of code showing the progress bar bracketed by <!--[If IE]> <![endif]-->. Hello there, I designed a website for a small company and the moment I put it up live, it was working fine. However, the next day I come into work and find that one of the pages have stopped working (It only shows the background and footer), and an image in the welcome intro text on the index.html does not show (as if I didn't code it in at all). This only happens on IE though yet works perfectly fine on Chrome and FireFox. I'm not sure if this is due to IE having it's own personal cache and not updating it properly? Yet if I edit the welcome text to show a new message, it will show that. www.abbeymill.com is the URL and the Function Bookings page is the one which does not show properly. Please view both index.html and the function bookings page in Chrome and IE. I would really love a saviour to help me figure this mind boggling issue out W3C says it all validates fine aswell. Hi... Trying to get this site running but had to use somebody else's code for the forms and I cannot seem to get them working... Here's the link... http://artinludlow.com/joe/index.html Do not go to the main "com/index.html" page, use the "joe/index.html" directory. thanks Hey All, So I have this frustrating situation illustrated by this screeny: www.kiddyjunction.ca/images/pic.jpg The yellow box (which is an iframe) aligns to center itself between those beige flash tabs on the left, and the other side of the white box, which is PERFECT. However, the logo, represented by the red box, aligns itself to be in the center of the white box, instead of between the edge and the flash material, despite all being in the same container. How do I get the logo to align over the center of the iframe (yellow box)? Thanks! |
|||||||