|
CSS - Trouble Getting Css Tabs To Work In Firefox
Hi, I'm completely new to this but I've been trying to implement CSS tabs on my webpage in a computer science class. They work correctly in IE (the browser at my school that I've been testing on) but not in Firefox (there is a space between the bottom of the tab and the line). Below is the CSS, what do I need to change to make it compatible with both browsers? Thanks for the help.
body { font: 100% "Century Gothic", verdana, arial, sans-serif; background-color: #fff; margin: 50px; } ul#tabnav { font: bold 11px "Century Gothic", verdana, arial, sans-serif; list-style-type: none; padding-bottom: 26px; border-bottom: 1px solid #03A; margin: 0; } ul#tabnav li { float: left; height: 21px; background-color: #38E; margin: 2px 2px 0 2px; border: 1px solid #03A; } body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { border-bottom: 1px solid #fff; background-color: #fff; } body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { color: #000; } #tabnav a { float: left; display: block; color: #000; text-decoration: none; padding: 4px; } #tabnav a:hover { background: #fff; } Similar TutorialsNevermind, figured it out. Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="testcss.css" /> </head> <body> <div id="wall2"> <a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) --> </div> </body> </html> And the css.... Quote: body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;} a{color:blue; border:0; padding-bottom:0px; padding-top:0px;} a:hover{color:#DE7008;} img { border:0; padding-bottom:0px; padding-top:0px;} div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; } img#unsold {border:0px; padding:0px; margin:0px;} The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row. Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers. The code is XHTML and CSS validated. Gareth. Hi Everyone, I have a page I am working on that works perfect in IE, but having a little trouble with Firefox. The Navigation menw lines up perfect in IE, but seems to "fall off the edge" in Firefox.....haven't checked the other browsers, but I'm sure it would be the same....the width is set to 100%.... I would post the link, but this forum won't let me.....I got the script from Dynamic Drive and it was called: Solid Block Menu Style sheet for Menu: .menu { margin: 0; float:left; font: bold 14px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #66FFFF; border-width: 1px 0px; background: url(images/menu_back.gif) center center repeat-x; } .menu li { display: inline; } .menu li a { float: right; color: white; padding: 7px 12px; text-decoration: none; } .menu li a:visited { color: #000000; } .menu li a:hover, .menu li .current{ color: #FFFFFF; background: transparent url(images/menu_back_over.gif) center center repeat-x; } CODE in HTML: <ul class="menu"> <li><a href="URL HERE">Frosty Questionnaire</a></li> <li><a href="URL HERE">Board of Directors</a></li> <li><a href="URL HERE">Sponsorship & Volunteer Opportunities</a></li> <li><a href="URL HERE" class="current">Home</a></li> </ul> <br style="clear: left" /> Thanks! Hello! I've been searching the internet for a solution to this for quite a while now but I've found nothing. I've also tried some methods to fix it but nothing seems to be helping me. I might just be stupid because I'm not terribly good at this. Here goes. Scenario: Firefox not reading list items as hyperlinks even though it's <ul><a><li>Hello World</li></a></ul>. where I use something like li{width:200px;height:100px;} firefox only interprets the text as a hyperlink, but not the list item field. This is the actual example: Markup: Code:
<UL id="menu">
<LI> Product
<UL>
<A href="index.php?m=product1"><LI>PRODUCT1</LI></a></LI>
</UL>
</LI>
</UL>
CSS: Code:
#menu UL LI UL A{
height: 100px;
width: 500px;
}
#menu UL LI UL LI:hover{
background: red;
}
This results in the background shifting to red when I hover over the list item, HOWEVER firefox does not interpret the list item as a hyperlink, even though it's inside <a></a> where Opera and Chrome both do. Any suggestions on how to solve this? I apologize for bad grammar. EDIT: To make the problem obvious I attach a picture. URL Site: project-jericho.com An organization recently hired me to give their web site a "face lift". Everything was working fine until I tried to tile a background within the main content div. If you go to the page in internet explorer, you'll see how it's supposed to look. In firefox, however, the background does not show up. If I set the min-height value to a certain number of pixels in #main, the background stops tiling after that many pixels (in firefox.) min-height: 100%; does not work. The css (if necessary): (this is the css for everything under /* content */ which I'm fairly sure is where I've isolated the problem to. Code:
/* content */
#main {
color: #333;
margin: auto;
padding: 0px;
text-align: left;
width: 680px;
background-image: url('img/bgx2.jpg');
background-repeat: repeat-y;
}
#content{
width: 440px;
float: left;
padding: 10px 10px 20px 10px;
}
* html #content{
padding-top:20px;
}
#content .post
{
margin:0 0 3em 0;
}
#content .cat
{
margin:0;
padding:0;
color:#999;
}
#content .post-info
{
color:#777;
text-align:right;
}
#content .post-info em
{
font-style:normal;
float:left;
margin:0 5px 0 0;
}
em.user
{
padding-left:12px;
background:url(img/user.png) no-repeat left center;
}
em.date
{
padding-left:15px;
background:url(img/date.gif) no-repeat left center;
}
#main .post-comments
{
background:url(img/comments.gif) no-repeat left center;
padding-left:12px;
}
All I need for this code to do is to tile vertically in both Firefox and Internet Explorer. I've been wasting hours in this office on this and any help would greatly greatly appreciated. Thank you so much in advance. -Josh I have the following CSS that works correctly in IE7 and Chrome, but not in Firefox. The "Height" doesn't adjust in firefox. <div style="border: 1px solid #696; padding: 5px 10; text-align: left; width: 90%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: #666 0px 4px 20px; -moz-box-shadow: #666 0px 4px 20px; box-shadow: #666 0px 4px 20px; background: #ffffff; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffffff)); background: -webkit-linear-gradient(#ffffff, #ffffff); background: -moz-linear-gradient(#ffffff, #ffffff); background: -ms-linear-gradient(#ffffff, #ffffff); background: -o-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); -pie-background: linear-gradient(#ffffff, #ffffff); behavior: url(/PIE.htc);"> Any help would be appreciated. I added a new template to my vbulletin forums. Unfortunately, the nav bar (uses css) is not displaying the proper anchor text color in IE6 (should be white). url: forums*jwsuretybonds*com Here is the header code: Code:
<STYLE TYPE="text/css">
<!--
.nav_box
{
border-top:solid 1px #677281;
border-right:solid 1px #677281;
height: 24px;
vertical-align: middle;
text-align: left;
background-color: #214E77;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
padding-left: 5px;
}
.nav_box_over
{
border-top:solid 1px #677281;
border-right:solid 1px #677281;
height: 24px;
vertical-align: middle;
text-align: left;
background-image:url('images/bg_roll.jpg');
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
padding-left: 5px;
cursor: hand;
}
.nav_box A{font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#ffffff;}
.nav_box_over A{font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#606060; }
//-->
</STYLE>
<table width="741" border="0" align="center" cellpadding="0" cellspacing="0" style="border-top:solid 1px #F1F2F2; border-left:solid 1px #F1F2F2; border-right:solid 1px #F1F2F2">
<tr>
<td><img src="http://www.jwsuretybonds.com/images/jw_logo2.jpg" alt="JW Surety Bonds - Logo" width="281" height="167" /><img src="http://www.jwsuretybonds.com/images/bannertop.jpg" alt="Bond"width="458" height="167" /></td>
</tr>
</table>
<table width="741" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.jwsuretybonds.com/images/bg_pattern.jpg" style="border-right:solid 1px #F1F2F2; border-left:solid 1px #F1F2F2">
<tr>
<td width="741" valign="top">
<table width="741" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/index.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
<center><a href='http://www.jwsuretybonds.com/'>Home - JW Surety Bond</a></center>
</td>
<td width="184" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/apps.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
<center><a href='http://www.jwsuretybonds.com/apps.htm'>APPLICATIONS</a></center>
</td>
<td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/bond_information.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
<center><a href='http://www.jwsuretybonds.com/bond_information.htm'>Learn About Bonding</a></center>
</td>
<td width="185" bgcolor="#F9FFFF" class="nav_box" onclick="javascript:parent.top.location.href='http://www.jwsuretybonds.com/coprof.htm'" onmouseover="this.className='nav_box_over';" onmouseout="this.className='nav_box';">
<center><a href='http://www.jwsuretybonds.com/coprof.htm'>Company Profile</a></center>
</td>
</tr>
</table>
</tr>
<tr>
<td>
<table style="float: right;" border="0" cellpadding="5" cellspacing="0" background="http://www.jwsuretybonds.com/images/bg_pattern.jpg">
<tr>
<td align="center">
<a href="https://srv0.velaro.com/visitor/requestchat.aspx?siteid=1151&showwhen=inqueue&secure=yes" target="VelaroChat"
onClick="this.newWindow = window.open('https://srv0.velaro.com/visitor/requestchat.aspx?siteid=1151&showwhen=inqueue&secure=yes', 'VelaroChat',
'toolbar=no,location=no,directories=no,menubar=no,status=no,scrollbars=no,resizable=yes,replace=no') ;
this.newWindow.focus();this.newWindow.opener=window;return false;"><img alt="Velaro Live Help"
src="https://srv0.velaro.com/visitor/check.aspx?siteid=1151&showwhen=inqueue" border="0"></a>
</td>
</tr>
</table>
<BR>
<H1 style="margin-left: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color:#103465;">Surety Bond Forums</h1>
Anyone have any ideas? Hi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John I worked out a css layout in Safari using various rgba colors for div backgrounds like so: css Code: Original - css Code .someStyle { background-color: rgba(0,0,0,.3); }
.someStyle {
When I access the page in the latest version of Firefox (1.5.0.1), it rejects every rgba color with the error message: Error: Expected end of value for property but found 'rgba'. Error in parsing value for property 'background-color'. Declaration dropped. Source File: http://localhost/Project1/css/WidgetStyles.css Line: 50 I'm assuming this is a Firefox bug but just wanted to check with others here. Strangely, Firefox does support rgba colors in <canvas> tags so why not in CSS? Thanks for any help the url is: http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html In IE8 beta it works perfectly. In firefox the entire bottom section (the part under the slide show) is messed up. In Opera there's a gap under the play controls. If I close the gap, it messes up IE. Getting this slide show to work was quite the task, but I'm close to having it work on the big three! Should I just un-nest everything? Hi I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE. Here is the link: Look first in Firefox at my menu then look at it in IE. http://www.bcit.gimppro.co.uk/index.php Also is their some way to test my CSS code to make sure it works in all browser. PHP Code: #menu { top:5px; width: 8.87em; /* set width of menu */ background: #eee; width: 100%; } #menu ul { /* remove bullets and list indents */ list-style: none; margin: 0; padding: 0; } #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: relative; top: 0; left: 100%; /* to position them to the right of their containing block */ width: 100%; /* width is based on the containing block */ } /* style, color and size links and headings to suit */ #menu a, #menu h2 { font: bold 11px/16px arial; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li { /* make the list elements a containing block for the nested lists */ position: relative; } div#menu ul ul ul, div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} #menu ul { list-style: none; margin: 0; padding: 0; width: 8.87em; float: left; } div.container{ position:relative; top:0px; left:0px; width:995px; height:auto; } #login{ position:absolute; top:300px; left:745px; height: auto; width:240px; font: bold 11px/16px arial; } #content{ position:absolute; top:300px; left:0px; height: auto; width:695px; margin:0 .25em; padding: 5px 15px; font: bold 11px/16px arial; border: 1px solid black; } #content h1, h2 { font-weight: bolder; } #banner{ position:absolute; top:0px; left:0px; height: auto; width:1000px; } My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code. Code:
#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Here is the HTML. Code:
<div id="menu">
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
<li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
<li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
<li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="History">History</a></li>
<li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
<li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
<ul>
<li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
<li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
</ul>
<li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
<li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>
</ul>
</ul>
<ul>
<li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
<ul>
<li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
<li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
</ul>
</ul>
</div>
Thank you in advance Hi. I am thinking my two problems are related! Here are my two problems: My top nav bar links don't work in Firefox and the design breaks in IE7. Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide! christthesavior.org Thank you!!! Hi all, I'm trying to create a simple menu with rollover links using CSS, but while it works in IE, it stops as soon as the link text ends in Firefox. Is this because Friefox is ignoring the width and heigh commands in CSS? And is there any way to fix this? If so, how? I've got this working on Firefox Code:
.menu_item {
}
.menu_item a:link{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:active{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:visited{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:hover{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_1.gif);
background-repeat: no-repeat;
color: #ED1C2D;
text-decoration: none;
}
Cheers. The situation is very simple: Code: <div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
<div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
red box<br>
red box<br>
red box<br>
red box<br>
red box<br>
red box<br>
</div>
<div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
green box<br>
green box<br>
green box<br>
green box<br>
</div>
</div>
AS you can see, I have a main div. Inside it, I have 2 divs: red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows. What I need is either enter text in the red or green divs and make the main div to auto resize. (I'm using Mozilla FireFox) Any Idea? http://img55. imageshack .us/img55/6775/cssexamplesy8.png ^ please remove the space before and image shack to view the image I've taken a screenshot of a problem I need help with, which is how IE and Firefox handle nested lists. Using code like this: Code:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Firefox displays the new list without being pushed down yet IE seems to create the space for where the list item would be and I can't figure out how to remove the space / how to get it to act like firefox. Removing the list item that holds the nested ul solves all problems but it isn't valid so I'm looking for another solution. Cheers I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned): Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> |
|||||||