|
CSS - Firefox/ie Problem
Similar TutorialsHi there, I am new to this world of web development and this forum. Would be looking for help from all the experienced techies and where possible also help it out. I have written the following code but it is working in IE but not in Firefox. [Code] ______ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Lets Learn, Teach And Educate</title> <meta name="description" content="Education For All"> <meta name="keywords" content="Kids Forum, Kids Education, Kids Fun Learning, Professional Knowledge, Professional Education Material, General Educational Links, General Education Topics"> <style type="text/css"> body { background: url('Graphics\SaraswatiGoddess.jpg') no-repeat center fixed; } </style> </head> <body> <div></div> </body> </html> ________ END CODE Got it validated thru W3C and CSS but still no success. I seem to be having some problems formatting a <ul><li> element. you can view the page he http://jjs5327.aisites.com/IMD331/index.php a description of the problem is that the "quick links" section has an unordered list that in firefox 3 has an indent but in explorer looks the way I want it too. below is my code: Code:
#left {
background-color:#CCCCCC;
border:1px solid #666666;
width:115px;
height:200px;
float:left;
clear:both;
}
#quicknav {
text-align:left;
margin:0;
padding:0;
}
#quicknav li, #quicknav a {
display:block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
list-style:none;
text-decoration:none;
margin-left:5px;
width:100px;
}
#quicknav a:hover, #quicknav a:focus,
#quicknav a:active{
color: #990000;
}
.quickhead {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
text-align:center;
margin-top:5px;
}
and the HTML:
<div id="left">
<div id="quicknav">
<h2 class="quickhead">Quick Links</h2>
<br />
<ul>
<li><a href="best.php">Best Sellers</a></li>
<li><a href="new.php">What's New</a></li>
<li><a href="sale.php">Sales & Deals</a></li>
</ul>
<br />
<hr />
<br />
<ul>
<li><a href="about.php">About Us</a></li>
<li><a href="faq.php">F.A.Q</a></li>
<li><a href="help.php">Help</a></li>
</ul>
</div>
</div>
I'm in the process of switching my table driven site to a CSS one. I guess I'm having trouble with positioning, I have all the text stuff pretty down, but this is giving me troubles. Here is what it should look like, (screen from IE) http://www.samuraiblog.com/utl1.jpg Here is what it looks like in anything but IE (screen from Firefox) http://www.samuraiblog.com/utl2.jpg Here is my CSS snippet: Code: h3{
color:#666666;
font-size:medium;
font-variant:small-caps;
letter-spacing:.1ex;
border-top:1px solid #999999;
border-bottom:1px solid #999999;}
#title {
width: 800;
height: 250;
position: absolute;
top: 0;
left: 0;
backround-color: white;
}
#b-title {
width: 800;
height: 166;
position: absolute;
top: 250px;
left: 0px;
backround-color: black;
}
#quote {
position: absolute;
top: 270;
left: 16;
float: left;
height:70;
width: 700;
}
and here is direcly from HTML, Code: <div id="title">
<table id="Table_01" width="800" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/title-nav_01.jpg" width="800" height="192" alt=""></td>
</tr>
<tr>
<td>
<img src="images/title-nav_02.jpg" width="223" height="58" alt=""></td>
<td> <a href="/blogs"><img src="images/title-nav_03.jpg" alt="" width="98" height="58" border="0"></a></td>
<td> <a href="/forums"><img src="images/title-nav_04.jpg" alt="" width="133" height="58" border="0"></a></td>
<td> <a href="/folding"><img src="images/title-nav_05.jpg" alt="" width="136" height="58" border="0"></a></td>
<td> <a href="/the-arts"><img src="images/title-nav_06.jpg" alt="" width="210" height="58" border="0"></a></td>
</tr>
</table>
</div>
<div id="b-title"><img src="images/title-bottem.jpg" width="800" height="166" /></div>
<div id="quote">
<h3>"There once was a man from nan tucket and he sat on a bucket and read
computer Magizines all day long..." -Sam</h3>
</div>
Any suggestions? Thanks, -Sam My site renders properly using Firefox (and Opera), but IE skews the format entirely. Looks like the table cells aren't correct, but I've double checked the code and all the tables appear to be right. I don't know if there are CSS incompatibilities with IE, but would appreciate some helpful assistance from the forum. http://markswebsite.net/dev5 html4strict Code: Original - html4strict Code <!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" /> <title>Lederer's Sound</title> <meta name="DESCRIPTION" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="KEYWORDS" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="COPYRIGHT" content="Lederer's Sound"> <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <meta http-equiv="CHARSET" content="ISO-8859-1"> <meta http-equiv="content-LANGUAGE" content="English"> <meta name="RATING" content="General"> <meta name="ROBOTS" content="index,follow"> <meta name="REVISIT-AFTER" content="7 days"> <link href="includes/main.css" rel="stylesheet" type="text/css" /> <!--<link href="includes/sfd.css" rel="stylesheet" type="text/css" />--> </head> <body> <div id="frame"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> <tr> <td width="49%"><img src="images/lederers_sound.gif" alt="Lederer's Sound" width="366" height="63"></td> <td width="51%"> <div align="right"><img src="images/call3.gif" alt="Call us (703) 532-2400" width="313" height="67" border="0" usemap="#Map2"></div> </td> </tr> </table> <hr> <div id="contentleft"> <div id="leftinfo"> <div id="search"> <table width="100%" border="0" cellspacing="3" cellpadding="3"> <tr> <td height="33" valign="middle"> <form action="index.htm." name="srchform"> <input type="text" id="srchtxt" name="SS" size="10" maxlength="125" value="Search Store" onfocus="this.value='';this.style.background='#FFFFFF'" class="input"> <input type="submit" value="Go"> <input type="hidden" name="PR" value="-1"> <input type="hidden" name="TB" value="A"> <input type="hidden" name="SHOP" value=""> <input type="hidden" name="ACTINIC_REFERRER" value="index.html"> </form> </td> </tr> </table> </div> <!-- end search --> <hr> <div id="store"> <a href="index.html"><img src="images/Store_000.gif" width="120" height="37" hspace="13" border="0"></a> </div> <!-- end store --> <hr> <div id="leftnav"> <br> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Products</u></th> <tr> <td width="129"> <a href="intercoms/index.html">Home Intercoms</a><br> <a href="pasystems/index.html">Portable PA Systems</a><br> <a href="index.html">Megaphones</a> <br> <a href="index.html">PA Amplifiers</a><br> <a href="index.html">Message Repeaters</a><br> <a href="microphones/index.html">Microphones</a><br> <a href="index.html">Audio Security Masking</a><br> <a href="remote_ventilators/index.html">Remote Ventilator Alarms</a><br><BR><BR> </td> </tr> </table> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Services</u></th> <tr> <td width="129"> <a href="index.html">Corporate Services</a><br> <a href="index.html">Installations</a><br> <a href="index.html">Hire Services</a> <br><br> </td> </tr> </table> </div> <!-- leftnav --> <hr> <p> <div id="leftnav"> <table width="100%" height="170" border="0" cellspacing="1" cellpadding="1"> <tr> <td width="129" align="left"><br> <a href="news.html">News</a><br> <a href="links.html">Links</a><br> <a href="ordering.html">Ordering</a><br> </td> </tr> </table> </div> <!-- leftnav --> </div> <!-- leftinfo --> </div> <!-- contentleft --> <div id="contentcenter"> <div id="content_header"><img src="images/header_home.gif" width="585" height="165"> </div> <hr> <table cellpadding=10> <tr> <td> Lederer's Sound has been family owned and operated for over 25 years. We offer friendly and personalized service. Call or <a href="mailto:lederersnd@aol.com">email</a> us with any questions you may have with your existing system, or if you are interested in repairs or updating. We will be happy to help you! <p> Free estimates/Washintgon, DC/Metro area. </td> </tr> </table> </div> <!-- contentcenter--> <div id="quickfind"> <h3>Product Quick Find</h3> <table border="0" cellspacing="7" cellpadding="7" align="center""> <tr> <td width="70" align="center"><a href="intercoms/index.html"><img src="images/home_intercoms.jpeg" alt="Home Intercoms" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="pasystems/index.html"><img src="images/portable_pa_systems.jpeg" alt="Pa Systems" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/megaphones.jpeg" alt="Megaphones" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/pa_amplifiers.jpeg" alt="PA Amplifiers" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="intercoms/index.html">Home Intercoms</a></td> <td align="center"><a href="pasystems/index.html">Portable PA Systems</a></td> <td align="center"><a href="index.html">Megaphones</a></td> <td align="center"><a href="index.html">PA Amplifiers</a></td> </tr> <tr> <td width="70" align="center"><a href="index.html"><img src="images/message_repeaters.jpeg" alt="Message Repeaters" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="microphones/index.html"><img src="images/qk_mic.jpg" alt="Mics" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/audio_security.jpeg" alt="Audio Security" width="70" height="57" border="0"></a></td> <td width="94" align="center"><a href="remote_ventilators/index.html"><img src="remote_ventilators/images/fcsystem.jpg" alt="Remote Ventilator Alarms" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="index.html">Message Repeaters</a></td> <td align="center"><a href="microphones/index.html">Mics</a></td> <td align="center"><a href="index.html">Audio Security Masking</a></td> <td align="center"><a href="remote_ventilators/index.html">Remote Ventilator Alarms</a></td> </tr> </table> </div> <!-- quickfind --> <div id="footer"> <p>Copyright 2006 Lederer's Sound<br> <a href="index.html">Contact Us</a> | <a href="index.html">Disclaimer</a> | <a href="index.html">Terms & Conditions</a></p> </div> </div> <map name="Map2" id="Map2"> <area shape="rect" coords="257,8,307,58" href="mailto:lederersnd@aol.com" alt="Email Us"> </map> </body> </html>
css Code: Original - css Code /* CSS Document */ body { text-align:center; background: #BEBEBE url(images/bg-vert.jpg) repeat-x 50% 0; font-family:Verdana, sans-serif; font-size: 75%; line-height: 1.5em; margin: 0px 0px; color:#858585; } /* ---[ links ]------------------------------- */ a:link { color: #858585; } a:visited { color: #858585; } a:hover { color: #666666; } #frame { position: relative; margin: 0 auto; padding: 0; text-align: left; font-size: 95%; width: 750px; border-left: 1px solid #666; border-right: 1px solid #666; background: url(images/frame-bg.gif); } #hdr { height:68px; background:#fff; } /*----------------Nav-------------------*/ #search { width: 100%; padding:0px; background:#F0F0F0 url(bg-srh.gif) no-repeat; } #store { width: 100%; padding:0px; background:#F0F0F0 ; } #contentleft { width:150px; padding:0px; float:left; background:#ccc; border-top:1px solid #D4D4D4; } #leftinfo { width:159px; padding:0px; float:left; background:#fff; } #leftnav { padding-left:3px; background: #F0F0F0; border-bottom:1px solid #D4D4D4; } #leftnav table { padding: 0px; margin: 0px; border-collapse: collapse; } #contentcenter { width:585px; padding:0px; float:right; padding-left:8px; background:#fff; } #content_header { padding: 0 0; margin: 0 0; height: 165px ; } #content_header2 { padding: 0 0; margin: 0 0; height: 228px ; } #quickfind { float:right; width:575px; padding:5px 5px; background-color: #FFF; border-top: 1px solid #D4D4D4; } /*------ text --------------*/ .productheading { font-weight:bold; font-size:13px; }
Thanks! check this link please, once in IE and then in FireFox http://www.acapi.com/en/ and the CSS for the Quick Search background is Code:
.qiqsearch {
background-attachment: fixed;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-position: 15px 15px;
}
what should i make to make it appear? This is a css script that works wonderful in IE: [SIZE=2]A:link {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:visited {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:hover {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:21; color: #faf994;} A:active {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} BODY { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} TD { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; FONT-SIZE: 16px } #screen {LEFT: 10%; WIDTH: 80%; POSITION: absolute; TOP: 10%; HEIGHT: 80%} #screen IMG { VISIBILITY: hidden; WIDTH: 0px; CURSOR: pointer; POSITION: absolute; HEIGHT: 0px } #canvas SPAN { FILTER: alpha(opacity=99); LEFT: -1000px; WHITE-SPACE: nowrap; POSITION: absolute; opacity: 99 } #bankImages {DISPLAY: none} [SIZE=2] But when it comes to firefox, the links on top if the script does not work at all. How can I place the A:link, A:visited, A:hover, A:active somewhere, in the HTML or in a separate css and make it work? If I just use the links A:link, A:visited, A:hover, A:active and a BODY {COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} in a css it will work in both IE and firefox. greatful for some help! Hanna Da Site Here Check the site out first in IE6, the index page displays correctly with the images as backgrounds for tables (yes I know tables are not good in my situation, but its what I have). Then look at the site in FF, the images I desginated as backgrounds in the tables will not display. Also the border color for the tables on the index page will not display whit in FF. I dont know why the code would work in IE and not FF. Can someone please hlep me out. If i use style tags instead of CSS I can make the images display... I'm currently working on my first HTML site using CSS and it appears exactly as I want it to on IE, but does not on Firefox. On IE it's centered in the middle of the screen and there are no gaps, but on Firefox it's left justified and there is a gap between a couple graphics. I ran it through an HTML and CSS validator and supposedly it is error-free, so does anyone know what the problem may be? Thanks in advance. Adam http://thesuperbeedesigns.com/Lora/ FYI the page isn't functional, the links don't go to live pages. Hi, I am trying to work with just getting my companies web site (poor design and I just started ) away from tables. I am trying to duplicate (for practice) the home page but have a problem with padding/margin around the logo, search, etc in the header portion of the site. I would like firefox to display the "header" area similar to how it can be viewed in ie 6.x. I know CSS quite well but have just started getting into the standards, so that is where my knowledge is lacking! Any comments on what I have done so far would be appreciated! Here is the url:http://www.rell.com/rell.html and the code: CSS: PHP Code: body { margin: 0; padding: 0; background-color: #066; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #header { background: url(http://www.rell.com/images/banner_home.jpg) center bottom no-repeat; padding: 1.8em, 0.5em, 0.2em, 1em; } #header form { position: absolute; color: #fff; font-size: 9px; right: 1em; } #header #rellSearch { top: 5.5em; } HTML: PHP Code: <div id="header"> <a href="http://www.rell.com"><img src="http://www.rell.com/images/RELL_logo.gif" border="0" width="178" height="65" alt="Richardson Electronics logo" /></a> <form action="http://catalog.rell.com/rellecom/scripts/QuickSrch.asp" method="get"> Search Online Catalog: <input type="text" name="SKU" maxlength="50" size="6" /> </form> <form id="rellSearch" action="http://search.atomz.com/search/" method="get"> Search RELL.com: <input type="text" size="6" name="sp-q" maxlength="50" /><INPUT type="hidden" name="sp-a" value="000704b8-sp00000000" /> </form> </div> Thank you, cranium Hi All, As an avid reader of these forums for sometime, I can usually find the help I need by searching through the posts but my latest problem is killing me. I have spent close to 15 hours trying all kinds of methods to fix it but with no luck. Can anyone help? In IE my page looks fine, just as I want it but firefox throws a fit when viewing on 800 x 600 (as in the nav buttons and text do not align properly, (auto expand, start a new line)). In essense they do not align properly when the nav buttons are forced to wrap. Here is the test page Here is my CSS: (div top is the top banner. div nav is the nav button area.) html Code: Original - html Code div.top{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img); background-repeat: repeat; text-align:center; font-family: $font_style; font-size: 24px; color: $site_text_colour; } /*To make the block autostretch on IE*/ * html .top {left:3px;} * html .top {right:3px;} * html .top {width:100%;} div.nav{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg); height:40px; } /*To make the block autostretch on IE*/ * html .nav {left:3px;} * html .nav {right:6px;} * html .nav {width:100%;} * html .nav { height:30px;} .cssnav { position: relative; font-family: arial, helvetica, sans-serif; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour); border:none; background-repeat: no-repeat; white-space:wrap; display: inline; top:-15px; height: auto; padding-right:5px; width:120px; margin: 0; padding-bottom:10px; } * html .cssnav {top:0px;} .cssnav a { display: inline; color:#000000; font-size: 11px; width: 120px; height: 25px; color: white; text-align:center; text-decoration: none; } .cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;} * html .cssnav img { height: 30px; width:120px; border: 0; } * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: 15px; top: 8px; margin: 0px; padding: 0px; cursor: pointer; color:$link_text; text-align:center; font-size:12px; font-weight:bold; }
div.top{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img);
background-repeat: repeat;
text-align:center;
font-family: $font_style;
font-size: 24px;
color: $site_text_colour;
}
/*To make the block autostretch on IE*/
* html .top {left:3px;}
* html .top {right:3px;}
* html .top {width:100%;}
div.nav{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg);
height:40px;
}
/*To make the block autostretch on IE*/
* html .nav {left:3px;}
* html .nav {right:6px;}
* html .nav {width:100%;}
* html .nav { height:30px;}
.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour);
border:none;
background-repeat: no-repeat;
white-space:wrap;
display: inline;
top:-15px;
height: auto;
padding-right:5px;
width:120px;
margin: 0;
padding-bottom:10px;
}
* html .cssnav {top:0px;}
.cssnav a {
display: inline;
color:#000000;
font-size: 11px;
width: 120px;
height: 25px;
color: white;
text-align:center;
text-decoration: none;
}
.cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;}
* html .cssnav img { height: 30px; width:120px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 15px;
top: 8px;
margin: 0px;
padding: 0px;
cursor: pointer;
color:$link_text;
text-align:center;
font-size:12px;
font-weight:bold;
}
I have messed with above code so much trying to get it right that I know it is a bit of a mess now but scared to change anything in case I mess up IE as well. There is another problem with Firefox in that the hover buttons don't align but that's another story. Any help greatly appreciated. Im using this code in my css file to vertically align the title of a web page to the middle of the div. It works fine in FireFox but in IE its not aligned, its still at the top This is the css code Code: .creswick {
font-family: "Comic Sans MS", Verdana;
color: #365689;
background-color: #D4A102;
}
.creswick2 {
font-family: "Comic Sans MS", Verdana;
color: #FFFF00;
background-color: #D4A102;
}
#Logo {
position:absolute;
height:130px;
width:262px;
left:0px;
top:0px;
}
#Title {
position:absolute;
left:262px;
height:130px;
top:0px;
width:600px;
text-align:center;
vertical-align:middle;
}
#Menu {
position:absolute;
left:0px;
top:131px;
width:262px;
font-size:12;
}
#Content {
position:absolute;
left:277px;
text-align:left;
top:131px;
width:575px;
overflow: visible;
}
#RightSide {
position:absolute;
top:131px;
left:863px;
width:100px;
}
#Right_Side_Top {
position:absolute;
top:0px;
left:863px;
height:130px;
width:100px;
}
website is here http://creswickplaygroup.co.uk/ Hello, I'm new to CSS.. I made my design in Photoshop.. Sliced it.. and then set the design through the CSS.. I set the complete design and it looks great in IE but when I see it in Firefox it is completely out of order.. Can anyone please guide me what is the problem? I can give you my CSS if you require.. Have you ever seen this kind of problem before.. What am I doing worng? I will really appreciate your help in this regard. Cheers! I dont know what I am doing wrong. I checked one of the online templates and actually I got the idea from an online template. I want to float columnist image to left, short text to right with these codes. It appears fine at ie but in firefox text appears line under image. Here; http://www.pearl.ru/isdunyasi #maincontentcolumns { float:left; margin-right:2px; width:598px; height:150px; background:#FFFFFF url(images/innerheadline_bg.gif) top no-repeat; } #maincontentcolumns h1 { padding:0px; margin-bottom:5px; font-size:14px; font-weight:bold; color:#FFFFFF; } #maincontentcolumns .c { float:left; margin:0px 2px 0px 2px; width:292px; height:80px; } #maincontentcolumns .c img { float:left; position:relative; height:80px; width:80px; padding:2px; } #maincontentcolumns .c p { float:right; padding:2px; margin:0; font-size:14px; } PS: This is my last working with ie not with firefox message. I started testing with firefox. When it works with firefox it surely works with ie. Hi, I have the following CSS: .class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;} for this javascript/HTML: menu1[0]='<span class="class2"><a href=""> About our trees</a></span><br>' It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good. AAUGH. Happy Thanksgiving to all who are celebrating! Kimber ok when you take a look at http://www.mostardesigns.com/razorsedge/ you can clearly see what the alignment problem is. Here is the code below: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Razor's Edge</title>
<style type="text/css">
<!--
@import url("css/general.css");
-->
</style>
</head>
<body>
<center>
<table width="898" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="10"><img src="images/banner.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/menu_1.jpg" border="0" alt="" /></td>
<td><img src="images/menu_home_1.jpg" border="0" alt="Home" /></td>
<td><img src="images/menu_servers_1.jpg" border="0" alt="Services" /></td>
<td><img src="images/menu_tournaments_1.jpg" border="0" alt="Tournaments" /></td>
<td><img src="images/menu_downloads_1.jpg" border="0" alt="Downloads" /></td>
<td><img src="images/menu_sponsors_1.jpg" border="0" alt="Sponsors" /></td>
<td><img src="images/menu_proshop_1.jpg" border="0" alt="Proshop" /></td>
<td><img src="images/menu_forums_1.jpg" border="0" alt="Forums" /></td>
<td><img src="images/menu_contact_1.jpg" border="0" alt="Contact" /></td>
<td><img src="images/menu_2.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/menu_3.jpg" border="0" alt="" /></td>
<td colspan="6" class="border_top"></td>
<td colspan="2"><img src="images/menu_5.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td class="border_left"><img src="images/border_left_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="bg_main">
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg_menu"><div class="bg_menu_left"> </div></td>
<td class="bg_center"><img src="images/tournament.jpg" border="0" alt="" /></td>
<td class="bg_menu"><div class="bg_menu_right"> </div></td>
</tr>
</table>
</td>
<td class="border_right"><img src="images/border_right_1.jpg" border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/bottom_1.jpg" border="0" alt="" /></td>
<td colspan="8" class="border_bottom"></td>
<td><img src="images/bottom_3.jpg" border="0" alt="" /></td>
</tr>
</table>
</center>
</body>
</html>
CSS: Code: /* BEGIN GENERAL SETTINGS */
body {
background-color:#B0D2F4;
background-image:url(../images/body_bg.jpg);
background-position:top;
background-repeat:repeat-x;
margin:0px;
text-align:center;
}
body, td, div {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
}
/* BEGIN TD SETTINGS */
td.border_top {
background-image:url(../images/menu_4.jpg);
background-repeat:repeat-x;
}
td.border_left {
width:30px;
background-image:url(../images/border_left_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_right {
width:30px;
background-image:url(../images/border_right_2.jpg);
background-repeat:repeat-y;
vertical-align:top;
}
td.border_bottom {
height:30px;
background-image:url(../images/bottom_2.jpg);
background-repeat:repeat-x;
}
td.bg_main {
background-color:#EFEFEF;
padding:3px;
vertical-align:top;
}
td.bg_menu {
background-color:#829CB5;
vertical-align:top;
padding:0px;
width:206px;
}
td.bg_center {
padding-left:2px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
vertical-align:top;
width:420px;
}
/* BEGIN DIV SETTINGS */
div.bg_menu_left {
background-image:url(../images/menu_left_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
div.bg_menu_right {
background-image:url(../images/menu_right_bg.jpg);
background-repeat:repeat-y;
vertical-align:top;
width:200px;
padding:2px;
margin:3px;
}
I've got a layer on my page that I'm showing and hiding through javascript. The layer is positioned absolutely and given a position of right: 0 and bottom: 10px in the CSS file. Now in one case I actually went into the page and did an inline style to change the position. So that one is given a different position, top: -5px and left: 10px. In IE it works fine. In Firefox the border sometimes won't expand to enclose the box. Here's what I've found: -Take out the position from the CSS file and position with inline style -- works. -Leave the position in the CSS file and don't position with inline style -- works. -Leave position in CSS file and change right to left and change to any value -- works. -Leave position in CSS file and change bottom to top and change to any value -- doesn't work. So the big culprit here seems to be defining a position with bottom and then switching to top causes Firefox 1.5 or 2 to fail. The same thing seems to happen in Opera 9. This seems like a bug, but why in multiple browsers? I've tried floating things within the box, setting the overflow to auto, nothing seems to make the border expand around the box. Any thoughts? Good evening ladies and gents, This is my first post so I thank you guys for your help in advance, I usually just do trial and error with CSS untill it works but this one has me puzzled. on my website www/CanadaFinance/net the sidebar isnt aligning the same on IE and Firefox. In Firefox it aligns how I want it but in IE its far too left, the reason is the way <UL> is being treated by each browser. Can anyone teach me how to fish and get this problem fixed? Thanks. I'm having a problem with CSS widths on Firefox. My website, http://www.freefootball.org looks good in IE7 but when I look at it in Firefox, the main div on the left gets pushed down. I'm using a conditional CSS statement to get it working in IE which works well so its the #maincontentdiv that is the problem. My code for the divs in question is below. Any ideas on how to fix this? Code: }#ffsquaread {
display: block;
width: 270px;
text-align: center;
float: right;
margin-top: 10px;
}
#ffmaincontent {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.3em;
color: #000000;
display: block;
}
html>body #ffmaincontent {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.3em;
color: #000000;
display: block;
width: 80%;
}
As simple as the problem sounds, Im completely puzzled by what could be going wrong. The problem is if I set the width of my div too 100%, it wont show up in Firefox. It works fine if I define it in pixels, but I want it to just stretch. Using a % works fine in IE. Here is the code: Code:
#left {
width:100%;
height:598px;
padding:0;
background: #EEF;
display: table-cell;
background: url("bg.gif") top left repeat-x;
}
Anyone have any ideas? |
|||||||