CSS - Wierd Bug In Firefox...
http://xplozive.net/
When you go to that in firefox and rollover one of the links on the left, the content bg color shortens...anyway to fix this? Similar TutorialsHi, im making a site for a friend but cant seem to understand why the css works fine on one page and the exact same css fails on another. CSS: Code: #topmenu_wow { background-image: url(images/wow_menu.png); height: 73px; width: 1030px; display: block; background-repeat: no-repeat; position: relative; margin-right: auto; margin-left: auto; } #topmenu_war { background-image: url(images/war_menu.png); height: 73px; width: 1030px; display: block; background-repeat: no-repeat; position: relative; margin-right: auto; margin-left: auto; } #menupos { top: 15px; position: relative; } html for the menu: Code: <div id="topmenu_war"><!--this is the one row im changing, topmenu_war (not working) or topmenu_wow (working)--> <span id="home"><a href="index.html"><span id="menupos">Home</span></a></span> <span id="info"><a href="info.html"><span id="menupos">Info</span></a></span> <span id="demo"><a href="demo.html"><span id="menupos">Demo</span></a></span> <a href="#"><span></span></a> <span id="pricing"><a href="pricing.html"><span id="menupos">Pricing</span></a></span> <span id="order"><a href="order.html"><span id="menupos">Order</span></a></span> <span id="support"><a href="support.html"><span id="menupos">Support</span></a></span></div> The working page The bugged page I've tried to put each file in a own folder with a own css (eg /wow/index.html) but no luck. Any help is welcome! Regards - mrsarun Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS. css Code: Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; } .logo{ Here is my html of that part. html Code: Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> Here is what it outputs. http://blacknine.net/test.html Hello, I am experincing something strange with a basic table enclosed in my content div... The situation: I have basic layout, a header with 2 columns. The main content div holds the left hand side of the page and all works well... except the table. It shoots off the screen and a horizontal scroll bar apears and the table aligns up next to the far left div when viewed in Firefox, but aligns properly when viewed in IE 6. If I enclose the table in a paragraph tag, it displays properly but then fails XHTML validation stating that I have enclosed a block element within a line element. I have gone over and over the table tags, and all seems correct... went to the w3c and mimicked their sample table and have gotten the same prob. Has anyone else experinced this?? DIscovered any solutions?? Help! Thanks. edit... here is the code: the CSS portion: #header { color: #a47716; border-top: .1px solid #e5eca9; margin: 0; padding: 0; height: 100px; background: #ccdd99 url("./headerBG.png") repeat-x; } h1.header, h2.header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #a47716; border-bottom: none; } #content { padding: 40px 10px 10px 10px; background: #fff; margin: 0px 25% 20px 5px; border-top: 2px groove #87c6ae; border-right: 2px outset #87c6ae; border-left: 2px groove #87c6ae; width: 75%; } #rightCol { margin: 0px; position: absolute; top: 140px; width:20%; right: 0; padding: 30px 10px 10px 10px; } #footer { margin: 0 25% 0 5px; padding: 0; text-align:center; font-size:small; } The XHTML: <!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> <title>the title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- @import allTheStyleSheets.css; --> </style> </head> <body> <!-- begin page header --> <div id="header"> <?php include('./incHeader.php')?> </div> <!-- end page header --> <!-- begin tab menu --> <div id="tabMenu"> <?php include('./incNav.php')?> </div> <!-- end tab menu --> <!-- begin main content --> <div id="content"> <table summary="A summary."> <caption> The Caption</caption> <tr> <th id="topic">Topic</th> <th id="issue">Issue</th> <th id="action">Action</th> </tr> <tr> <td headers="topic"><h3>Heading</h3> <p><a href="http://murphyzone.no-ip.com/GCCBFM/news/blog/index.php?p=10">Comment</a></p></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic">cell content</td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> </table> </div> <!-- end main content --> <!-- begin right column --> <div id="rightCol"> the right column... </div> <!-- end right column --> <!-- begin footer --> <div id="footer"> <?php include('./incFooter.php')?> </div> <!-- end footer --> </body> </html> Thanks again. I'm having this issue where 1st paragraph is not indented then all the rest are.... I don't want any indentation.... yet for some reason something is causing it to. How can i investigate what's causing this? Thanks. (btw there's no UL or LI involved in this only P so I have a <h2> tag within a <div id="content"> tag, and I want the h2 tag to be about 115px from the top of the content div. Yet everytime I set the margin, it pushes both the <h2> tag AND the <div id="content"> tag down by 115px. Here's my CSS code: #content{ background: #bd1f1f url("images/body_bkgrnd.jpg"); } #content h2{ font: 34px/30px Helvetica; color: black; margin: 115px 0px 0px 0px; width: 544px; } And here's the relevant HTML: <div id="content"> <h2> Great themes, amazing icons, and the best kit of templates. </h2> </div> <!-- end content --> And here's a picture to show what I mean: [IMG]C:\question.jpg[/IMG] Thanks guys! Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. Hi Guys, I'm working on a form, and for the life of me, I can't get these divs to sit side by side. You can see the test page at www.details.at/search_test.cfm It's a small form with a few fields and selects I want each element to sit side by side in a single row. Here is the code. I thought display:inline; would do the trick, but it's not working. Code: <style> #control_panel { padding:0 0 1em 2em; width:600px; float:left; } .smalltext { font-family: arial, helvetica, sans-serif; color: #000000; font-size: .7em; } .input { font: .9em Arial, Helvetica, sans-serif; background-color: #FFFFFF; color: #146eb4; border: 1px solid #146eb4; } label { text-align: left; display: block; } div.search_cell { display: inline; } </style> <div id="control_panel"> <form action="http://test.at" METHOD="post"> <div class="search_cell"> <INPUT class="input" NAME="search_box" value="" size="25" maxlength="200"> <label for="search_box"><span class="smalltext">search</span></label> </div> <div class="search_cell"> <select class="input" name="range"> <option value="50">50</option> <option value="Any">Any</option> <option value="1" >1</option> </select> <label for="search_box"><span class="smalltext">within</span></label> </div> <div class="search_cell"> <select class="input" name="range_measure"> <option value="Miles">Miles</option> <option value="kilometers">Kilometers</option> </select> <label for="search_box"><span class="smalltext">range</span></label> </div> <div class="search_cell"> <span class="smalltext">of</span> </div> <div class="search_cell"> <INPUT class="input" value="" type="Text" name="location" size="10"> <label for="location"><span class="smalltext">city & state or postal</span></label> </div> <div class="search_cell"> <INPUT class="input" type="submit" name="Submit" value="Go"> </div> </form> </div> </div> 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 have a site using CSS for layout It has one main div called main-column that sits in the middle of the page and has a background image. Within this there are 3 columns columns. the trouble is the background of the main column does not show up behind these three. If you right click it says there is a background image there but nothing is showing. my css is: Code: #main-column { width:750px; height: 100%; margin-left: auto; margin-right: auto; background-image:url(/site_images/bodyback.jpg); } #left-column { width:150px; float:left; } #contents-column { width:450px; float:left; } #right-column { width:150px; float:right; } and html is: Code: <!-- Start of main column --> <div id="main-column"> <!-- Start of Left Column Div --> <div id="left-column"> <? include("../includes/leftnav.php"); ?> <!-- End of Left Column Div --> </div> <!-- Start of contents Column Div --> <div id="contents-column"> <? include("../includes/main.php"); ?> </div> <!-- Start of right Column Div --> <div id="right-column"> <? include("../includes/rightnav.php"); ?> <!-- End of right Column Div --> </div> <!-- End of Main Column Div --> </div> Any idea how I can correct this? I see there is another post here on this. But it may be a different issue. I was hoping some of the experts could take 30 seconds to see why this looks fine in Firefox and not IE. It did validate at w3c. I am sure there is a hack, but if there is something that sicks out real quick it would be much appreciated. I know everyone gives there extra time here and it is greatly appreciated. echo9design.com/willoughby/index3.html my css in IE is GREAT and look good. but on firefox, it doesnt show my background and all that. can anyone give me some suggestions. www.na-magodai.net I created a menu for someone, hideous as it may be, it's what they wanted. However, it works in Firefox but not in Internet Explorer. This is code I used for the menu. .Menu ul li { float:left; position:relative; list-style-image:url(images/divider2.gif); margin:0 15px 0 20px; padding:0; } I have an image to replace the bullets that would normally appear. In Firefox it appears with the image as it should, but in Internet Explorer it is not showing up like it should. 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? Hi, I'm having an issue with Firefox displaying my home page correctly. It previews smaller than other pages in my site even though they all share the same style sheet. In IE 7 my site previews fine, the issue is with Firefox for some reason the wrapper seems to shrink on the home page and any help or tips to steer me the right way would be greatly appreciated, thanks. Code: <---Style sheet----> body { margin: 0; padding: 0; background-image: url(assests/wrapperimage.jpg); background-attachment: fixed; } p { color: #FFFFFF; font-family: "Courier New", Courier, monospace; line-height: 20px; letter-spacing: 2px; font-size: 12px; margin-top: 0; margin-bottom: 0px; } h1 { font-size: 2.4em; color: #00FF00; border-bottom-width: thin; border-bottom-color: #00FF00; border-bottom-style: dashed; margin-top: 40px; text-align: center; } h2 { font-size: 20px; color: #CCFF66; text-align: center; } #wrapper { width: 800px; height: 1150px; border-right: 2px solid #00FF00; border-left: 2px solid #00FF00; border-bottom: #000000 10px; margin-right: auto; margin-left: auto; background: #000000; } #banner { height: 250px; width: 800px; } #sidebar { float: left; width: 190px; height: 500px; margin-top: 60px; margin-left: 10px; margin-bottom: 60px; padding-left: 10px; color: #FFFFFF; text-align: center; border-color: #999999; border-style: thin; } #sidebar li { list-style: none; background-image: url(assests/images/images/images/check.jpg); background-repeat: no-repeat; padding-left: 25px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 6px; text-align: left; } #main { float:right; width: 500px; padding: 5px; } ul.nav { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 50px; padding-left: 0px; list-style: none; float: left; width: 750px; letter-spacing: 3px; } ul.nav li { float: left; padding-left: 10px; margin-left: 15px; margin-right: 10px; } ul.nav a { display: block; padding-left: 15px; padding-right: 5px; margin-left: 10px; margin-right: 5px; background-color: #000000; text-decoration: none; color: #00FF00; text-align: center; } ul.nav a:hover { background-image: url(assests/images/images/images/check.jpg); background-position: left; background-repeat: no-repeat; padding-right: 10px; color: #FFFFFF; } </style> <----Home page HTML----> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"> <img src="assests/images/starbanner.jpg" /> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About us?</a></li> <li><a href="services.html">Services</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> <div id="sidebar"> <h2>Why have a website?</h2> <p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation. Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve. Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p> <p> </p> </div> <div id="main"> <h1>Web Design Studio</h1> <p>star media is a web design studio located in Troy, Michigan. Our specialty is providing afforadable and customized web design services as well as graphic design and print services. With our competitve pricing and custom tailored marketing programs we will drive customers to your website and through your business doors. Our competitive pricing and quick turn around time in developing websites ensures you have your website up and running as quickly as possible without breaking the bank. From basic and simple websites to high caliber e-commerce database driven websites Gstar media does it all. <h2>Why have a website?</h2> <p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation. Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve. Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p> </div> </div> </body> </body> </html> <-------About US HTML------> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"> <img src="assests/images/starbanner.jpg" /> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About us</a></li> <li><a href="services.html">Services</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> <div id="sidebar"> <h2>We offer:</h2> <ul> <li>web design</li> <li>web hosting</li> <li>e-commerce</li> <li>logo design</li> <li>business card design</li> <li>flyer design</li> <li>customized marketing campaigns</li> <li>Search engine optimization</li> <li>web maintence</li> <li>illustration</li> </ul> </p> </div> <div id="main"> <h1>Our Promise.</h1> <p>star media is created with the goal of providing affordable web design service to small business owners and professionals. I graduated from Sheridan college with a degree in business and later went on to get a degree in graphic design. With a strong background in business I understand how to market your business and message effectively to prospective customers that will help spread the awarness of your products and services in order to increase your revenues. I have a strong understanding of graphic design principles with a working knowledge of CSS/XHTML, Photoshop CS3, and Illustrator CS3. </p> </div> </div> </body> </html> i read the thread posted about this not too long ago, and tried out the DOCTYPE! tag suggested, along with a few others from W3... however all that did was screw up the page more. anything you could do to help would be great Page Link Have a page at www.maxxedmotors.com/damo There is a div called "container" which is supposed to surround all of the content with a border. This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header". Can anyone tell me where i'm being dumb Any help greatfully appreciated. My website works fine with all browsers except IE. Can anyone help me with the issue? www.opennys.com It uses CSS and xHTML and PHP. Thanks, Dennis I have two divs on a page and the last two are about 10 pixels higher up the screen than the last one. But if I adjust the window size they move back down where they should be. This only happens on of the pages though which is quite odd. Does anyone know of any firefox bugs that would cause this and any work-arounds? |