|
CSS - Ie, Firefox View ( Again )
Ok i have created an html table with some info in it.. now there is a problem ( like always ) its viewable in 2 different ways for example in f/f the table are off.. and in IE it shows the way i want it to.. but i need it to work the same in both browsers...
Code:
<form method="post" action="<?php print $PHP_SELF; ?>">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="90%">
<tr>
<td width="100%" align="center">
<table border="0" cellpadding="2" cellspacing="1" bgcolor="#eeeeee" align="center" width="100%" class="tablesOne">
<tr>
<td colspan="5" bgcolor="#eeeeee"> </td>
</tr>
<tr>
<td width="100%" bgcolor="#eeeeee" valign="center" align="center">SERVICE FORM</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td width="100%" align="left">
<table border="1" cellpadding="2" cellspacing="2" width="45%" class="tablesTwo">
<tr>
<td>AMT</td>
</tr>
<tr>
<td> Americo Miranda</td>
</tr>
<tr>
<td> San Juan, PR 00921</td>
</tr>
<tr>
<td> Phone: (787) 706-8272, Fax: (787) 706-8151</td>
</tr>
</table>
</td>
</tr>
</table>
and i added some css to it.. Code:
.tablesOne {
border-top: solid 1px #eeeeee;
border-bottom: solid 1px #eeeeee;
border-right: solid 1px #eeeeee;
border-left: solid 1px #eeeeee;
font-family: serif;
font-size: 18px;
color: #000000;
}
.tablesTwo {
border-top: solid 1px #eeeeee;
border-bottom: solid 1px #eeeeee;
border-right: solid 1px #eeeeee;
border-left: solid 1px #eeeeee;
background: #ffffff;
font-family: serif;
font-size: 12px;
color: #000000;
}
Any help on this? has anyone fix this damn errors yet with IE, and Firefox. Similar TutorialsHi, I am using Dreamewaver CS4 and i noticed that when i view my page in live view or in the browser my background image doesnt show up. It does however in the split code/design view. Any help? Here is my Page Code 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>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #96D0FF;
}
.thrColAbsHdr #container {
position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
font-size: 11pt;
}
/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/
.thrColAbsHdr #header {
height: 60px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColAbsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 267px;
left: 3px;
width: 150px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 267px;
right: 3px;
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px;
background-color: #CCC;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]--></head>
<body class="thrColAbsHdr">
<div id="container">
<p><img src="Images/Header Home.png" width="509" height="144" align="absmiddle" /><img src="Images/www.yoursouthlandsmile.png" width="163" height="52" /></p>
<p><img src="Images/Links.png" width="780" height="38" /></p>
<div id="sidebar1">
<h3>
<!-- end #sidebar1 -->
Meet The Doctors:</h3>
<p> <img src="Images/Dr. J.png" alt="" width="83" height="95" align="absmiddle" /></p>
<p>Dr. J. Chris Harvan </p>
<p><img src="Images/Dr.png" alt="" width="82" height="93" align="absmiddle" /></p>
<p>Dr. Kristina Harven</p>
<!-- end #sidebar2 -->
</div>
<div id="sidebar2">
<p> </p>
<p><img src="Images/Invisalign.png" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p> </p>
</div>
<div id="mainContent">
<h1> Your Dental Health Is Our Priority</h1>
<p>
<p><img src="Images/DO2.png" width="119" height="119" align="left" />Welcome to Southland Smiles. Your oral health is our highest priority, and we strive to help our patients experience a positive health change and maintain that change for the rest of their lives. </p>
<p><br />
<marquee><img src="Images/Marquee/imgres-1.jpeg" height="119" /><img src="Images/Marquee/imgres-2.jpeg" height="119" /><img src="Images/Marquee/imgres-3.jpeg" height="119" /><img src="Images/Marquee/imgres-4.jpeg" height="119" /><img src="Images/Marquee/imgres-5.jpeg" height="119" /><img src="Images/Marquee/imgres-6.jpeg" height="119" /><img src="Images/Marquee/imgres.jpeg" height="119" /></p>
<p>
<!-- end #mainContent -->
</div>
</p>
<p> </p>
<p> </p>
<div id="footer">
<p> <img src="Images/296268493113.png" width="29" height="29" align="absmiddle" /> | 25521 East Smoky Hill Road, Suite 140, Aurora, CO 80016 </p>
<div><a href="mailto:info@yoursouthlandsmile.com">info@yoursouthlandsmile.com</a></div>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
And here is the code for the style sheet that defines the background: Code:
body {background-image: url(images/background.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;}
Please take a look here http://www.vngs.com/test.html in Firefox, the first image is located at top-left, and the second is located at right-bottom. But in IE, both of them are on top How can I fix this? thanks grr.. i hate this thing... you know.. the different view in F/F and IE.. grrr i have this menu ( here ) when i view it in IE, its messed up.. but when i view it in F/F its not Code:
/* -- Memu Css -- */
#navcontainer {
margin-left: 30px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li {
margin: 0;
}
#navcontainer a {
display: block;
padding: 5px 10px;
width: 130px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer a:hover {
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navcontainer ul ul li {
margin: 0;
}
#navcontainer ul ul a {
display: block;
padding: 5px 5px 5px 30px;
width: 130px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
}
#navcontainer ul ul a:hover {
color: #000;
background-color: #889E88;
text-decoration: none;
}
any help? Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks Hi ; Please view http://www.baykam.com/index_en.php . The page seems different and tables collapse in internet explorer . Here is the code in the header of the page . Code:
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("layout.css");
-->
</style>
</head>
If yiou tell me which css sheet the code is using I can paste it here too ... Hello - this is my first time on the forum. I'm sure I must be missing something really simple. I'm not very experienced at CSS, and must admit I can't grasp the inherited properties principle, which may be the cause of my problem. I've pasted my code for the web page and my properties stylesheet below. Although, as you can see, I want to put a header near the top of the web page, nothing appears in my browser. (I mean nothing, the words I have put the header tag to just aren't there). I would be very grateful for some help. Thank you. The CSS validator says "Value Error : color attempt to find a semi-colon before the property name. add it" which I don't understand. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <title>Love Local Food - about us</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="love local food, love local, love food, local food, exeter food, devon food, devon vegetables, exeter vegetables, local vegetables, real bread, slow food, slow food exeter, slow food devon, rye bread, good food, good local food, van food, van exeter, van devon, local van, mobile shop, workshops, workshop, farm, farms, organic, organic food exeter, fresh food, local fresh food, fresh food exeter, fresh food devon " /> <meta name="description" content="We sell good fresh food by van in your locality" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /><!-- --> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="presentation.css" /> </head> <body> <!-- Header --> <div id="bar-top"> <p class="links"> <a href="index.html">home </a> <a href="mobileshop.html">mobile shop </a> <a href="farms.html">farms </a> <a href="workshops.html">workshops </a> <a href="joinus.html">join us </a> <a href="aboutus.html">about us </a> <a href="contactus.html">contact us </a> </p> </div> <!-- end of header --> <!-- main column --> <div id="main"> <p> <img src="slice4.jpg" alt="love local food" border="0" width="400" height = "125" class="center" /></p> <p> <img src="logo.gif" alt="love local food" align="left" border="0" width="300" height="175" /></p> <p class="header">about love local food</p> <p> Love Local Food is a new social enterprise initiated by Emmas Bread, Shillingford Organics, West Town Farm and organicArts along with others including David Tuffield, David Bossano, Rachel Moffat, Nicola Beglin, Paula Garwood, Amber Dawkins and Chukumeka Maxwell.</p> <p class="text">We are a group of local producers, educators and passionate food lovers who propose to bring a new and simple way of shopping to Exeter and surrounding areas.</p> <p class="text">We first met in July 2007 with the intention of becoming a workers co-operative that supported each other in the produce and sale of locally grown food.</p> <p class="text">We want to provide local food to local communities, provide a fair return to local producers and provide links between the consumer and producer through educational activities and resources.</p> <p class="text">We want to help consumers make the connection between the food they eat and the environment in which they live, and to help local people achieve well being.</p> <p class="text">We look to a future of the sustainable production and distribution of food, including allotments and gardens, where we renew our relationship with food and nature, and share the land.</p> <p class="text">A future where local communities, schools and other institutions are involved in commissioning local food production, community celebrations and sharing with other cultures.</p> <p class="text">A future where we are all open to new ideas about food and our relationship with it.</p> <!--links-box--> <div id="links-box"> <p class="links"> <a href="emmasbread.html">emmas bread </a> </p> <p class="links"><a href="shillingford.html">shillingford organics </a></p> <p class="links"><a href="westtown.html">west town farm </a></p> <p class="links"><a href="organicarts.html">organicARTS </a> </p> </div> <!--end of links box--> </div> <!-- end of main column --> </body> </html> /* Presentation Stylesheet */ .header { font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#000000 margin:0; padding:10px 10px 10px 15px; } .links { font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#000000; } .links a:link { color: #560007; text-decoration:none; } .links a:visited { color: #EF9C00; text-decoration:none; } .links a:active { color:#560007; text-decoration:none; } .text { font-family: Helvetica, Arial, Verdana, sans-serif; font-size:15px; color:#000000; } Happy New Year! I'm having issues with my website in progress, http://www.vilardojardim.com/about.html Everything seems to be displaying fine in Firefox, Safari and Explorer 8.0.6, but the IE 'Compatibility View Settings' makes the layout go all wiggy. Is there any way of automatically turning this off? Or, can someone help me out with a way to adjust the CSS to avoid the problem altogether? Thanks in advance for any assistance. I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions? I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance. CSS -------------------------------- #pages { margin-top: 12px; float: right; margin-right: 125px; font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color: #000; } #pages ul { list-style-type: none; margin: 0; padding: .5em 0; display: inline; } #pages li a { display: block; width: 1.5em; height: 1.5em; padding: 0; text-align: center; vertical-align: text-middle; text-decoration: none; } #pages a:link, #pages a:visited { margin: 0 10px 0 10px; text-decoration: none; color: #000; } #pages a:link#pagescurrent, #pages a:visited#pagescurrent { border-bottom: 1px solid #000; background: transparent; color: #000; } #pages a:hover { background-color: #949494; color: #fff; } HTML -------------------------- <div id="pages"> <ul> <li><a href="#" id="pagescurrent" title="next slide">1</a></li> <li><a href="#" title="next slide">2</a></li> <li><a href="#" title="next slide">3</a></li> <li><a href="#" title="next slide">4</a></li> </ul> </div> I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code:
body {
background-color: #F6EEC2;
margin: 10px;
padding: 0px;
}
#bannerBox {
background-color: transparent;
background-image: url(gfx/cpp_banner2.jpg);
background-repeat: no-repeat;
border: none;
padding-left: 5px;
height: 80px;
margin: 0px;
}
#leftNav {
position: absolute; left: 10px; top: 100px;
width: 130px;
background-color: transparent;
}
#navBlock {
position: relative; left: 7px;
width: 110px;
background-color: transparent;
border: 1px solid #6B9D98;
}
#main {
background-color: transparent;
position: relative;
margin-top: 5px;
margin-left: 138px;
margin-right: 0px;
border-left: 1px solid #6B9D98;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 137px;
margin-right: 0px;
}
html>body #main {
margin-left: 139px;
margin-right: 0px;
}
#main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
#tagLine {
background-color: transparent;
border: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 50px;
}
IMG {
position: relative;
float: right;
border: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
P,H1,H2 {
margin: 0px 10px 0px 10px;
}
H1 {
font: bold 16px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 10px;
}
H2 {
font: bold 14px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-top: 10px;
padding-bottom: 13px;
}
#leftNav P {
padding-top: 6px;
margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
padding-bottom: 15px;
}
#navBlock P {
font: bold 11px arial;
color: #6B9D98;
padding-top: 1px;
padding-bottom: 1px;
}
#main P {
text-align: justify;
font: 11px arial;
color: #6B9D98;
line-height: 17px;
padding-left: 10px;
padding-bottom: 10px;
}
#main P.head {
font: bold 12px arial;
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P {
font: 12px "arial";
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P.list {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 150px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.list2 {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 180px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.price {
font: 11px arial;
color: #6B9D98;
padding-left: 15px;
padding-bottom: 1px;
}
#tagLine P {
font: italic 11px arial;
color: #6B9D98;
padding-bottom: 3px;
}
#tagLine P.copy {
font:11px "lucida console";
color: #6B9D98;
padding-top: 5px;
}
A.nav:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:visited {
text-decoration: none;
background color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:hover {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.reg:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: none;
}
Hello folks, I've made a page where the user can change the style sheets by simply enabling/disabling them with a javascript. The page also contains 4 layers which are stacked on top of one another. I've came up against a problem that has me stumped! Basically if the user switches style sheets to a sheet that contains a smaller font-size, the currently visible Layer changes size which causes some of the text in the layer to be cut out of view. It also re-aligns the DIV contents to the left of the DIV instead of centered as it is set. I have tried playing around with overflow:visible and giving the layer a width to accomodate all text sizes, but I couldn't get it to work. Any ideas how I could get it to work? The only other idea I had was to reload the page but that isn't very elegant is it?! Any CSS experts know how it should be done? Best regards. I am working on a pop out menu on warrenhomes . The image displays properly in firefox and IE8, but the menu leaves are cut off in IE7 (or IE8 compatibility mode). pushing the list-style-position:inside; line isn't really helping either. Can someone tell me why ie7 is displaying list-style-image differently and possibly how I can correct this issue? Hi all, Is there any way to make the View-Text Size work in CSS - or more specifically, is there any way to limit how large or small the text becomes? I know you can use 0.8em font sizes, but I don't want the font to them become too large or small when adjusted, so is there any way to limit this? Thanks. Hello, I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts? Any suggestions will be greatly appreciated! Below are snippets of code from the css code and html code: CSS Code:
body {
margin: 0px 20px 0px 20px;
background-color: #069;
background-image: url(../images/bkgd.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #036;
}
#container {
width: 100%;
margin: 0px auto 0px auto;
background-color: #DDD;
}
...
#content {
background-color: #FFF;
padding: 20px;
margin-left: 190px;
}
...
#content_main table.data {
margin: 0px 0px 0px 0px;
border: 1px solid #369;
background-color: #FFF;
}
#content_main table a.nobrdr {
border-bottom: none;
}
#content_main table.data th {
height: 20px;
color: #E8E8E8;
text-align: center;
background-color: #369;
border: 1px solid #2C537D;
text-transform: uppercase;
}
#content_main table.data td {
height: 25px;
padding: 3px;
border: 1px solid #CCC;
vertical-align: top;
line-height: 15px;
}
HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data"> <tr> <th scope="col" width="5%" nowrap>fund</th> <th scope="col" width="6%" nowrap>bsli</th> <th scope="col" width="4%" nowrap>reg</th> <th scope="col">title</th> <th scope="col" width="9%" nowrap>projcode</th> <th scope="col" width="7%" nowrap>cip</th> <th scope="col" width="4%" nowrap>afc</th> <th scope="col" width="10%" nowrap>avail</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th scope="col" width="10%" nowrap>unoblig</th> <th scope="col" width="5%" nowrap> </th> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>140</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>3J0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>TC</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>4C0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> </table> I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this? Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf PC Firefox Screenshot: Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text) Any help is greatly appreciated Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another. I built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong? Please can someone tell me what I must do to get the code working in both IE and Firefox. Can someone please help me, i am desparate to intergrate transparency into my forum but im finding out what a pain in the *** it is. I tried semi transparent png's, but they only work in firefox and IE7 but most people are using IE6 (42.3%). I looked around on the internet for a fix that solves the ie6 png transparency issue but i didnt find one that shows it as semi transparent and doesnt bugger all of the links. Now ive moved onto CSS, ive found a solution that works great for IE 6 + 7 but not firefox. What happens is i apply a transparent css to the pagebackground: Code: filter:alpha(opacity=50); opacity: 0.5; but it applies it to everything on top as well. To get around this i apply a non transparent css to everything on top: Code: filter:alpha(opacity=100); opacity: 1; This works fine in IE making the background transparent and the contents on top solid but in firefox everything (including the content and the background) is transparent. Is there anything i can do to get around this? Its getting really annoying! Any help you can give would be much appreciated. James now i don't like saying things like possible bug because 99/100 it's not a bug, but some kind of user error. however, i have the following situation and i thought that describing it as a bug may get people interested in it two tables, both with auto width / height, both the same code. one table is set so that when viewed on screen it has display: none and then when printed it has display: block. if you do a print preview in internet explorer, the page shows two identicle tables. in mozilla, the table expands to fill the width of the page for the hidden table. see html attached for example; load in firefox / ie; do a print preview and you'll see what i mean. any ideas? |
|||||||