Firefox CSS Issues and Solutions
Topics
Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. Hi there, I have a site running on Joomla and I'm using cufon for changing the font type. The problem is that, in firefox, the tile only shows in the correct font in some articles... Here, using firefox the title shows up fine: sostudent.com/joomla/index.php/solutions Here, using firefox the title shows up without the font replaced by cufon: sostudent.com/joomla/index.php/about-us Also, I can't seem to change the links font as you can see in the "Contact Form" link on this page: sostudent.com/joomla/index.php/contacts In Google chrome everything seems fine!! Can anyone please help? Thanks, I am using dreamweaver cs5 and when I test my page in firefox, it is the color that I chose ( a pink color), but when i test it in internet explorer, it is black (this is the background color). Does anyone know why this is happening and how to correct it? Also, I made my page with tables and centered the table with no margins. well the page has a huge margin gap at the bottom in google browser, but it is fine in IE and firefox. any suggestions? Thanks. OK, I've been working with Firefox for a long time, and it usually serves me well for all browsers except IE. Now my design/CSS only looks good in firefox 4.0.1 and not Safari, Opera, or Google Chrome, and I'm really upset. Why are the other browsers displaying my CSS improperly? Is there a hack for all browsers now? OK, here's the site: http://www.caillouette.com/Diesel_site7/ Any info or insight is greatly appreciated. thanks -S Hi, I am using fieldset to group checkboxes. fieldset { border:none; autoHeight:true; } Several fieldset groups are used inside td (table). In firefox 3.6.17, the layout comes properly. The fieldset automatically adds a line break for every tr-td combination, the layout shows fine. But in IE 8.0.6001, the fieldset does not add a line break for every td/tr. So I have to add an additional blank/empty tr/td to add a line break. Doing so adds 2 lines in FF. How to overcome this problem? What is the ideal css style to be used so that the display comes properly in both IE and FF? Hey, I had a website which ran for about an year on most browsers with no probs. Now when Firefox v4 struck my site css is broken and im struggling to make it work on all sites properly. I know its shameless of me to ask to look trough the whole site but i just cant pick out where the problem exactly lies. the site is www . alterum . ee in firefox v4 main menu just breaks and seems like drags the content-wrapper with it. other browsers work fine atm. i would really appriciate if someone heped me with that problem. Or ill have to redo whole css from scratch which would be a bummer. As you can see, the image that says view all clients has a blue border on top and to the left also. There are no borders set for this image so I am not sure why its there. It does not show up on safari, just firefox. (I am not sure about IE since I am on a mac). Here is the code: .view_all_projects{ width:245px; height:63px; position:absolute; overflow:hidden; margin: 550px 0 0px 0; } And here is the html: <div class="view_all_projects"><a href="http://www.bestdropshipper.net/order.html"><img src="images/more_project.gif" alt="Best Dropshipper"/></a> </div> This image is also clickable. Any ideas why the strange blue border? Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } Hi - I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain. The website works fine in Firefox and Safari, and almost all the pages work fine in IE. The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari. It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP. The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place. If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code. It would be greatly appreciated if you could let me know if you would like to help me out. I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all. Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member. Hey, Just making a site for a friend and I have run into a block with the Hover tag. It works fine in IE but for some reason other browsers aren't working properly... Any ideas? I have put my source underneath, sorry its squashed up. I have also loaded the site to the domain but won't put the link - not sure if I'm allowed. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html> Code: /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;} Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 { background: url(images/header1.png) repeat-x; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; margin: 0; padding: 0; } HTML Quote: <div id="extraDiv1"></div> thanks. When I view my Dreamweaver CS4 html page on Firefox, the AP elements I used on it are not viewing properly. They are getting bumped down a bit and thus misaligning with other elements on the page. Any suggestions? Thanks. I do relatively simple websites and I did a simple one for a client of mine and have a problem selecting text in a column. The website is, jeffwalterssafety.com I can't seem to even touch the text. It acts like an "image" when looking at it in Firefox/Chrome but I can select it in IE 7. Be gentle in the site's criticism... Also let me know if it's necessary to have my CSS file here. Thanks I have an extremely weird problem with the formatting on my web player on a website I am creating. Its not the player, but I can't seem to figure out whats going on precisionstudiollc(dotcom)/index_mub(dot)html . In Mozilla the text in the web player works renders fine, in ie 7, the text gets cut off or doesn't render correctly...Any ideas? I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Quest Sports Medicine</title> <link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .center-wrap p { font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #000; font-size: 30px; line-height: 35px; padding: 0px; float: left; margin-top: 15px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .center-wrap h2 { font-family: Arial, Helvetica, sans-serif; font-size: 66px; font-weight: bold; color: #942610; text-align: center; line-height: 64px; margin-top: 83px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .center-wrap img { margin-top: 47px; margin-right: 0px; margin-bottom: 0px; margin-left: 248px; } } --> </style> </head> <body> <div class="all-wrap"> <div class="center-wrap"> <h2>NEW WEBSITE<br /> COMING SOON</br></h2> <p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br /> or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p> <img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" /> </img></div> </div> </body> </html> Any thoughts on what I need to change? Thank you. Hi I have done two pages and they seem to work fine in IE8 but when I view it in firefox there are a couple of issues: link On the home page i have a lightbox set up for the polaroids with specific width and height. In IE the div is exact in size but in firefox the div seems to expand beyond the dimensions of the div (a red dotted border is displayed on click) On the Products page, the right hand side of the book has products listed in which you hover over and the polaroids will reflect different angled shots of the product that the cursor is over. Each product line is a hyperlink but in Firefox some of these lines are unlinkable whereas in IE there is no problem here! It is the same instance with the sub menu on the left hand page too Can anyone point me in the right direction of solving these issues please? Hi there, I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems: 1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text) 2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring. I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below: CSS code associated with the logo as far as I can tell: Code: /** LOGO */ #logo { float: left; width: 430px; height: 96px; } #logo h1, #logo p { margin: 0px; line-height: normal; text-indent: -9999em; } #logo h1 { display: block; top: 0px; left: 0px; width: 430px; height: 96px; } #logo img { top: 200px; left: 0px; } #logo p { margin: -50px 0px 0px 0px; padding: 0px 0px 0px 0px; } HTML Code: Code: <div id="logo"> <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a> </div> I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere! Many thanks for any ideas or help! Hi, I have a problem with a menu. I use joomla 1.5 and I create a sprite CSS menu as follow: Code: ul.menu-central { width: 970px; display:inline; } ul.menu-central li { display:inline; } ul.menu-central li a { display: block; float:left; margin-left:5px; height: 80px; background-image: url((URL address blocked: See forum rules)); text-indent: -9999px; } ul.menu-central .item67 a { width: 150px; background-position: -10px -9px; } ul.menu-central .item72 a { width: 150px; background-position: -170px -9px; } ul.menu-central .item97 a { width: 150px; background-position: -330px -9px; } ul.menu-central .item79 a { width: 150px; background-position: -490px -9px; } ul.menu-central .item98 a { width: 150px; background-position: -650px -9px; } ul.menu-central .item99 a { width: 150px; background-position: -810px -9px; } a { outline: none; } In IE the bullets of the list are hidden, instead in Firefox are visible. I try to put: list-style:none and list-style-type: none in the css code, but nothing has happened. Someone could you know how can I hide the bullets also in Firefox? Thank you Hi Guys I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website. I am using the latest mac OS and latest versions of all browsers. The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this. Here is the code for the form... <form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" > <ul> <li> <label for="name">Name:</label> <input name="name" id="name" type="text" class="required" /> </li> <li> <label for="email">E-mail:</label> <input name="email" id="email" type="text" class="required email" /> </il> <li> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="required" /> </li> <li> <label for="detail">Message:</label> <textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea> </li> <li> <input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" /> </li></ul> </form> Here is the css for that page... #content_about { color: #666666; } /*************************************************** CONTACT ***************************************************/ #form { margin: 0px; position: relative; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 15px; float: left; } #form div { width: 510px; position: relative; float: left; padding-bottom: 9px; } #form div label { width: 400px; } #form div label.error { color: #a80000; position: absolute; top: 0px; right: 0px; text-align: right; font-size: 11px; } #form div.message_sent { background-color: #31B8DA; width: 890px; float: left; padding: 10px; margin-bottom: 15px; color: #FFFFFF; } #form input { width: 499px; padding: 8px; font-size: 13px; color: #999999; background-color: #FFFFFF; float: right; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; } #form input:focus, #form textarea:focus { background-color: #F4F4F4; } #form textarea { width: 500px; padding: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #aaaaaa; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; float: right; margin: 0px; } #form .submitBtn { background-color: #31b8da; width: 95px; color: #FFFFFF; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 0px; font-size: 16px; height: 35px; display: block; margin-top: 20px; } #form .submitBtn:hover { background-color: #1F93B4; color: #FFFFFF; } #form .submitBtn:focus { background-color: #4FC1E1; } #form strong { font-size: 24px; color: #FFFFFF; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #6a6a6a; display: block; } #form .font-11 { font-size: 11px; color: #CCCCCC; display: inline; } #content_about #form li label { margin-top: 0px; margin-right: 35px; margin-bottom: 0px; margin-left: 0px; line-height: 30px; } #content_about #form li { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 0px; } Any help would be greatly appreciated. Regards Jay Chrome and Firefox aren't styling any of the span elements I have-in IE they load fine. For example the css..I'll check back in this book I have and online to see if I can find the issue. I appreciate any help. For example heres a span I have. Code: .title {background-color:CCCCCC; font-family:Verdana; margin:0px; padding:0px; border:2px double blue; height:70px; width:200px; } the html.. Code: <div id="menu"> <span class="button"> <a href="www.google.com">home</a> </span> <span class="button"> <a href="www.google.com">home</a> </span> </div> <div id="content"> <div id="sidebar"> <p>sidebar to the right</p> <h2>text</h2> </div> <span class="title"> <h2>Title of something</h2> </span> <p>some text sdfdsdsfdsf</p> </div> It may be that the divs and spans are conflicting because of their properties or that they are not properly nested or named..? Here's my whole css document. Code: #container {margin-left:25%; margin-right:25%; } #header {text-align:center; background-color:grey; border:solid; border-width:2px; border-color:black; margin-bottom:20px; } #menu {background-color:white; border:solid; border-color:black; border-width:1px; font-family:Verdana; padding:8px; margin:0px; } .button {background-color:#FFFFCC; margin:3px; width:90px; border:solid; padding:2px; border-width:1px; border-color:black; text-decoration:none; color:grey; text-align:center; font-family:Verdana; font-size:small; } #content{background-color:white; font-family:Verdana; padding-left:20px; padding-top:0px; padding-bottom:0px; border:1px solid grey; margin-right:0px; margin-top:20px; height:900px; } .title {background-color:#CCCCCC; font-family:Verdana; border:2px double #000000; height:70px; width:200px; } #footer{align:center; background-color:grey;font-size:.60em;} #sidebar {float:right; width:150px; height:900px; background-color:white; border-left:1px double grey; margin-left:0px; padding:8px; } Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! The site is he http://andamu.org/main/yarn/ or "andamu.org /main /yarn" The appearance of the date, byline, comments/trackbacks and tags on the left, aligned beneath one another in IE 8 is the desired appearance. In Firefox, the date appears in the correct spot, but the rest appears to its right instead of below it. (I am modifying the Pico theme in MT5.) I'll try to get the relevant bits here, but please ask if I can provide more detail. The html part: html4strict Code: Original - html4strict Code <h2 class="date-header">September 6, 2010</h2> <div class="asset-footer"> <p class="asset-footer-info"> <span class="byline"> <span class="vcard author">Sivani</span> at <abbr class="published" title="2010-09-06T18:47:04-08:00"> 6:47 PM</abbr> </span> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#comments"> No Comments</a> <span class="separator"><br /></span> <a href="http://andamu.org/main/yarn/2010/09/the-socks-of-doom---part-ii-sucked-in-again.html#trackbacks"> No TrackBacks</a> </p> </div> <!-- class="asset-footer" -->
The css part: Code: .date-header { float: left; text-align: right; padding: 5px 20px 4px 0; margin-left: 20px; border-right: 1px solid #eee; width: 128px; color: #999; } .asset-footer { float: left; text-align: right; padding: 5px 20px 4px 0; margin-left: 20px; border-right: 1px solid #eee; width: 128px; color: #999; clear: all; } Note: I have tried using clear: all; in the .date-header to no effect. I'm having a problem with a wordpress theme I'm creating for a site. I'm basically laying out the structure at this point before I start to really style it as I wanted to code everything from scratch (as sort of a hobby/learning experience) and I've wanted to implement things like custom taxonomies and custom post types. Anyway I've got most of the structure (except the navigation) up and working. My single problem right now is that the sidebar is pushed down to the bottom of the page on Firefox on both mac and windows. Every other browser displays it fine, even IE6 (although that one has my footer pushed up below the sidebar instead of at the bottom of the page, but I'll go back and worry about all the IE bugs later). One thing I noticed while trying to diagnose this using the various browser developer tools available is that FireBug shows the sidebar as being in between some <section> tags (I'm using html5) and the other browsers show it being below the <section>, if you think of the section as the container div I think it'll give you a better idea of what I mean. This is the css, it seems to validate ok: Code: /* == Reset == */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } /* == BASICS == */ body { margin: 0 auto; width: 960px; } section { overflow: hidden; width: 600px; float: left; clear: none; } /* == POSTS == */ article[id*=post-] { padding: 10px 0; } article>header p, article>footer p { font-style: italic; } article+nav { font-weight: bold; } section>h1 { padding-top: 10px; } /* == SIDEBAR == */ aside { margin-top: 30px; overflow: hidden; width: 320px; float: right; clear: none; } aside li { list-style: none; } aside li ul li { list-style: disc outside; } /* search form -------------------------------------- */ .searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } /* == FOOTER == */ body>footer { padding-top: 100px; text-align: center; overflow: hidden; width: 100%; clear: both; } You can check the page for yourself at http://www.jasonfoulke.com/md2/ I don't think posting the html here would really help because it basically includes a bunch of different pages, so the best way to see it is to view source on the page. Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness. I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left. I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS. As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here. The code is below. Please let me know what I'm doing wrong! Code: <?php defined('C5_EXECUTE') or die(_("Access Denied.")); $this->inc('elements/header.php'); ?> <body> <div id="container"> <div id="navbar"> <div class="navspacer"> <a href=""></a></div> <div class="nav1"> <a href="plans.html"></a></div> <div class="nav2"> <a href="phones.html"></a></div> <div class="nav3"> <a href="broadband.html"></a></div> <div class="nav4"> <a href="index.html"></a></div> <div class="nav5"> <a href="services.html"></a></div> <div class="nav6"> <a href="accessories.html"></a></div> <div class="nav7"> <a href="locations.html"></a></div> <div class="display"> <div class="presentation"> <div class="columnzone"> <div class="column1"> <div class="columncontent"> <?php $a = new Area('Sidebar'); $a->display($c); ?> </div> </div> <div class="column2"> <div class="columncontent"> <?php $a = new Area('Main'); $a->display($c); ?> </div> </div> <div class="column3"> <div class="columncontent"> <?php $a = new Area('Column3'); $a->display($c); ?> </div> </div> </div> </div> <div id="bottomnav"> <div class="bnav1"> <a href="contactus.html"></a></div> <div class="bnav2"> <a href="feedback.html"></a></div> <div class="bnav3"> <a href="employment.html"></a></div> </div> </div> </div> </div> </div> <div class="footer"> <?php $this->inc('elements/footer.php'); ?> </div> </body> And the CSS: Code: /* CSS Document */ body { font:12px Trebuchet MS, Tahoma, Arial; color:#000000; background:url(/images/bg.jpg) repeat; } #container { margin:0 auto; width:1050px; bottom:0; } /* NavBar */ #navbar { width: 928px; height: 90px; position:absolute; padding-left:50px; top:0; } #navbar li { list-style:none; display:inline; } .navspacer a { display:inline; float:left; width: 20px; height: 90px; background:url(/images/nav00.png) no-repeat; text-decoration: none; position:inherit; } .nav1 a { display:inline; float:left; width: 132px; height: 90px; background:url(/images/nav01.png) no-repeat; text-decoration: none; position:inherit; } .nav1 a:hover { background:url(/images/nav08.png) no-repeat; } .nav2 a { display:inline; float:left; width: 127px; height: 90px; background:url(/images/nav02.png) no-repeat; text-decoration: none; position:inherit; } .nav2 a:hover { background:url(/images/nav09.png) no-repeat; } .nav3 a { display:inline; float:left; width: 139px; height: 90px; background:url(/images/nav03.png) no-repeat; text-decoration: none; position:inherit; } .nav3 a:hover { background:url(/images/nav10.png) no-repeat; } .nav4 a { display:inline; float:left; width: 114px; height: 90px; background:url(/images/nav04.png) no-repeat; text-decoration: none; position:inherit; } .nav4 a:hover { background:url(/images/nav04.png) no-repeat; } .nav5 a { display:inline; float:left; width: 126px; height: 90px; background:url(/images/nav05.png) no-repeat; text-decoration: none; position:inherit; } .nav5 a:hover { background:url(/images/nav12.png) no-repeat; } .nav6 a { display:inline; float:left; width: 129px; height: 90px; background:url(/images/nav06.png) no-repeat; text-decoration: none; position:inherit; } .nav6 a:hover { background:url(/images/nav13.png) no-repeat; } .nav7 a { display:inline; float:left; width: 141px; height: 90px; background:url(/images/nav07.png) no-repeat; text-decoration: none; position:inherit; } .nav7 a:hover { background:url(/images/nav14.png) no-repeat; } /* NavBar End */ /* Central Display Area */ .display { display:block; height:475px; left: 74Px; position: static ; width:950px; background:url(/images/display.png) top no-repeat; } /* Central Display Area */ /* Presentation Area */ .presentation { display:block; height:466px; position: absolute; left:71px; width:908px; top:421px; background:url(/images/presentation01.png) top no-repeat; } .columnzone { margin-top:-35px; padding-top:52px; position:relative; z-index:0; } .columncontent { padding: 18px 0px 0px 0px; } .column1 { width:259px; float:left; padding: 0px 15px 10px 20px; } .column2 { width:303px; float:left; padding: 0px 10px 10px 9px; } .column3 { width:259px; float:left; padding: 0px 10px 10px 15px; } /* Presentation Area End */ /* Bottom Nav */ #bottomnav { display:block; width: 928px; height: 90px; position:absolute; margin-top:887px; margin-left:21px; } #bottomnav li { list-style:none; display:inline; } .bnav1 a { display:inline; float:left; width: 326px; height: 37px; background:url(/images/presentation02.png) no-repeat; text-decoration: none; position:inherit; } .bnav1 a:hover { background:url(/images/presentation05.png) no-repeat; } .bnav2 a { display:inline; float:left; width: 250px; height: 37px; background:url(/images/presentation03.png) no-repeat; text-decoration: none; position:inherit; } .bnav2 a:hover { background:url(/images/presentation06.png) no-repeat; } .bnav3 a { display:inline; float:left; width: 332px; height: 37px; background:url(/images/presentation04.png) no-repeat; text-decoration: none; position:inherit; } .bnav3 a:hover { background:url(/images/presentation07.png) no-repeat; } @-moz-document url-prefix() { #bottomnav { display: inline-block; position:absolute; width: 928px; height: 90px; margin-left:0px; padding:0 0 0 0; } /* Bottom Nav End */ .footer { background:url(/images/footer.png) no-repeat; height:60px; text-align:center; color:#fefaca; padding-top:18px; margin-top: -500px; margin-bottom:20px; position:relative; z-index:2; } 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. Hello, I am trying to use the hr tag to create a visual division between news stories on this web page http://www.heshimakenya.org/newsmedia.html When I view this page in Firefox on a Mac, the story headlines are immediately under the hr line. I want to add some bottom padding to this line so there is some white space between the line and the headlines. I have used the hr tag in other sites and have never had this rendering issue before so I'm really stuck. For example, the site below uses the hr tag but when viewed in Firefox on a Mac, the lines render fine. http://oharenoise.org/ HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * { margin:0; padding:0; } #nav { list-style:none; position:relative; } #nav li { float:left; text-align:center; } #nav a { display:block; text-decoration:none; } #nav a:active, #nav a:focus, #nav a:hover { background:#254563; } /* --------- Sub Nav --------- */ #nav li.current ul { left:0px; } #nav ul { position:absolute; left:-999em; list-style:none; padding:0 0 0; width: 500px; } #nav ul li { width: auto; margin: 3px 3px 0 0px; } #nav ul a { font-size: 12px; height: auto; padding: 5px 10px; background: #dfeec9; border-radius: 8px; -moz-border-radius: 8px; width: auto; } #nav li:active ul, #nav li:hover ul { height: 30px; left: 10px; position: relative; padding: 0px 3px 5px 3px; background: none; width: 500px; } .navi01 { display: block; padding-top: 0px; padding-left: 0px; width: 33px; height: 44px; text-decoration: none; background: url(images/navi_01.png); } .navi02 { display: block; padding-top: 0px; padding-left: 0px; width: 133px; height: 44px; text-decoration: none; background: url(images/navi_02.png); } .navi03 { display: block; padding-top: 0px; padding-left: 0px; width: 86px; height: 44px; text-decoration: none; background: url(images/navi_03.png); } .navi04 { display: block; padding-top: 0px; padding-left: 0px; width: 83px; height: 44px; text-decoration: none; background: url(images/navi_04.png); } .navi05 { display: block; padding-top: 0px; padding-left: 0px; width: 92px; height: 44px; text-decoration: none; background: url(images/navi_05.png); } .navi06 { display: block; padding-top: 0px; padding-left: 0px; width: 82px; height: 44px; text-decoration: none; background: url(images/navi_06.png); } .navi07 { display: block; padding-top: 0px; padding-left: 0px; width: 30px; height: 44px; text-decoration: none; background: url(images/navi_07.png); } HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> hi the following img will help u understand the layout of my page. my page content is in <td id="cont"> my links are in <div id="scroll"> i have got several links in that div and i made the div scrollable with the following code. Code: <table id="tab"><tr> <td id="iframe"> <div id="scroll"> <ul> %%links%% </ul> </div> </td> <td id="cont">%%content%%</td> </tr></table> Code: #tab{width: 100%;} #iframe{width: 25%; vertical-align: top; padding-top: 3em; } /* only for ie */ * html #scroll{overflow: auto; width: auto; height: 100%; text-align: left; } /* only for firefox */ #scroll{overflow:auto; width: auto; height: auto; text-align: left; } #cont{width: 75%; height: 100%; vertical-align: top; text-align: center; padding: 2em; } my links <div> is scrollable in ie but not in firefox. in firefox i see all the links with no scrollbar. i know i would get a scrollbar in firefox if i say height:400px; instead of height: auto; but that's the problem. i want the height of <div id="scroll"> to depend on <td id="cont">. that means the height of the scrollable links should depend upon the height of the content. thank you Hello there. I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE Can anyone help? .navbar { width: 960px; line-height: 30px; background-color: silver; z-index:100; display: block; clear: both; } .navbar ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:100; } .navbar ul li { display: block; position: relative; float: left; width: 120px; font-weight: bolder; z-index:100; } .navbar li ul { display: none; line-height: 20px; z-index:100; } .navbar ul li a { display: block; text-decoration: none; color: #48fc30; padding: 4px 15px 4px 15px; background: #silver; margin-left: 1px; } .navbar ul li a signup { background: #black; } .navbar ul li a:hover { background: #grey; } .navbar li:hover ul { display: block; position: absolute; } .navbar li:hover li { float: none; font-size: 11px; } .navbar li:hover a { background: #red; } .navbar li:hover li a:hover { background: #blue; } 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. Hello, I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear. http://oharenoise.org/2010_news_releases-2.htm 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 Im creating a website for somebody and using CSS for positioning. Ive created a main content container which is a DIV and have several child DIVS which are the content themselves. The problem I am positioning the divs using relevant positioning but in firefox the webpage is still leaving lots of space underneath the positioned divs like they are stacked on top of each other. Safari isnt giving me this problem and I havent even looked at it in IE so i dont know yet. But could somebody please tell me how I can get firefox to get rid of all the space underneath because my DIVS are not stacked. http://christopher-ball.com/Craig/ visit that in firefox and you will see what I mean, theres a big chunk of red UNDER the footer that shouldnt be there. If i take out the awards and sponsors DIVS then the block disappears. Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! Hello all! I'm having an odd problem. I have a select box and a textarea right next to each other that need to be the exact same dimensions. I figure, easy, just set the height and width via CSS properties, but that doesn't seem to be accurate at all - in either browser. I got out a neat program called pixel ruler to see exactly how many pixels each is displayed with. This is what happens: ie - Not counting borders, the textarea is the exact width and height. The select box is correct width (not counting the border. If you include the 1px standard blue border on any of these, they are 2px too wide or tall). However, the height of the select box(very annoying) seems to be somewhat ignored in that ie forces the select box to end at the end of a row, so giving it a height will just approximate a row number. It would be nice if I could fix this. Any thoughts on that? firefox- Not including the border, the select box is 2px too few in both the width and height. If you include the border it is exact. (which means that ie and ff are going to be hard to match.) But here is the REAL puzzler and the biggest reason for the post. Firefox seems to get the textarea size completely wrong. Not including the border, it is 2px too wide and tall! If you include the border, it is then 4px too wide and tall. I have no padding or margins on these by the way, so that can't be the answer. Any thought as to why firefox is putting extra width and height on textareas? Or any suggestions on making a textarea and select the same size in both ff and ie? Thanks! Hi, I am fairly new to CSS and learning but came across something. When I click on links to go to other parts of my site, the container on 2 pages only shifts a little. I even used the template I created for the index for the other pages and the CSS is the same. I notice this happening on Firefox. IE 6/7 the page looks fine. Any reason for this? Thanks Code: #container{ margin-top: 0px; margin-right: auto;margin-bottom: 0px; margin-left: auto;width: 760px;background-color:#ffffff; border: 1px solid #6785b3; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px; color: #666666; height: 950px; } hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar. Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } The template I am working on is a simple HTML page that I want to modify to work in Joomla. However the look of the site is not quite the same in Firefox (where it looks good) and IE8 where one part of it I could not make right for two days. The left sidebar is shorter and the content right side is shorter and not aligned. I am aware that is something small but I could not get it right. Please help. The URL is: compasstgdotcom/~orak the css in questions is: base.css Thank you all Sounds simple... but I can't find an answer. I've a simple table row with a css background image. In the row I've my text links and two images that are links. While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top.. Any advice? The page can be seen at addcolour (co uk extension) CSS in a folder css the file name is addcolour Many thanks d I'm having some issues with an info form for a website I'm coding. The form uses CSS, and looks just fine in Firefox, but in IE part of it is messed up. http://www.blanchetrocker.com/contactus There's the URL. I really appreciate any tips and fixes. Hello, I was hoping somebody can help me. I have been playing around with the problem, but I can't seem to figure it out. It is regarding my navbar not aligning properly in firefox. If you view this section of my site . com/musicians/ In IE it looks as it should, however in firefox it's way off on the right. I am using 2 stylesheets for this page; . com/wp-content/themes/WP-Genius/style-music.css . com/musicians/skins/Nova/Nova.css If anybody can provide me some insight on how to fix this, that would be greatly appreciated Thanks! Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body { padding: 0; background: #ffffff url('images/img01.jpg'); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0 } h1, h2, h3, h4 { margin: 0; font-weight: normal; color: #AD1112; } h1 { font-size: 250%; } h2 { font-size: 180%; } h3 { font-size: 140%; font-weight: bold; } h4 { font-size: 100%; font-weight: bold; } p, ol, ul { line-height: 180%; } p { } ol { } ul { } blockquote { margin: 0; padding-left: 20px; font-style: italic; } blockquote * { line-height: normal; } a { color: #1267bc; } a:hover { color: #999999; } img { border: none; } img.left { float: left; margin: 10px 15px 0 0; } img.right { float: right; margin: 0 0 0 15px; } hr { display: none; } /* Header */ #header { width: 1030px; height: 260px; margin: 0 auto; background: url('images/img02.jpg') no-repeat right top; } /* Menu */ #menu { float: right; width: 1030px; height: 40px; padding: 220px 0 0 0; } #menu a { display: block; height: 32px; background: url('images/img06.gif') no-repeat; text-decoration: none; font-size: 13px; font-weight: bold; color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0 } #menu ul { width: 1026px; height: 40px; margin: 0; padding: 0; background: #AD1011 url('images/img05.jpg') repeat-x; border-left: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; list-style-type:none } #menu li { margin: 0; padding: 0; list-style: none; float: left; } #menu li a:hover { color: #123456;} #menu div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #000000; } #menu div a { position: relative; display: block; margin: 0; padding: 3px 10px; width: auto; height: 20px; white-space: nowrap; text-align: left; background: #6c91c5; color: #ffffff;} #menu div a:hover { color: #123456;} /* Page */ #page { width: 1030px; margin: 0 auto; } /* Content */ #content { float: left; width: 760px; height: 2040px; padding: 20px; background: #FFFFFF url('images/img07.gif') no-repeat left bottom; } /* Sidebar */ #sidebar { float: right; width: 220px; height: 2070px; padding-top: 10px; padding-right: 10px; background: #ffffff url('images/img07a.gif') no-repeat right bottom; } #sidebar a { color: #dddddd; } #sidebar a:hover { color: #999999; text-decoration: underline; } #sidebar ul { margin-left: 0; padding-left: 0; list-style: none; font-size: 92%; } #sidebar ul li { background: url('images/img13.gif') no-repeat 0px 12px; border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px } #sidebar ul li.first { border: none; } #sidebar ul li h2 { margin: 0; font-size: 100%; } #sidebar ul li h3 { margin: 0; font-size: 92%; } #sidebar ul li p { color: #dddddd; margin: 0; } #sidebar p { color: #dddddd; margin: 0; font-size: 92%; } .boxed { margin-bottom: 10px; background: #113c5c url('images/img10.gif') no-repeat left bottom; } .boxed .title { height: 30px; margin: 0; background: #000000 url('images/img08.jpg') no-repeat; font-size: 16px; font-weight: bold; color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0 } .boxed .content { padding: 15px; background: url('images/img09.gif') repeat-x; } .boxedPrintoftheMonth { margin-left: -790px; background: #113c5c url('images/img10PotM.gif') no-repeat left bottom; } .boxedPrintoftheMonth .title { height: 30px; margin: 0; background: #000000 url('images/img08PotM.jpg') no-repeat; font-size: 16px; font-weight: bold; color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0 } .boxedPrintoftheMonth .content { padding: 15px; background: url('images/img09.gif') repeat-x; } /* Footer */ #footer p { margin: 0; line-height: normal; font-size: 85%; color: #000000; } #footer a { color: #000000; } #footer a:hover { color: #666666; } This is the css for the rest of my pages: Code: body { padding: 0; background: #ffffff url('images/img01.jpg'); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0 } h1, h2, h3, h4 { margin: 0; font-weight: normal; color: #AD1112; } h1 { font-size: 250%; } h2 { font-size: 180%; } h3 { font-size: 140%; font-weight: bold; } h4 { font-size: 100%; font-weight: bold; } p, ol, ul { line-height: 180%; } p { } ol { } ul { } blockquote { margin: 0; padding-left: 20px; font-style: italic; } blockquote * { line-height: normal; } a { color: #1267bc; } a:hover { color: #999999; } img { border: none; } img.left { float: left; margin: 10px 15px 0 0; } img.right { float: right; margin: 0 0 0 15px; } img.left1 { float: left; margin: 0 70px 0 70px; } img.right1 { float: right; margin: 0 70px 0 70px; } img.left2 { float: left; margin: 20px 100px 20px 100px; } img.right2 { float: right; margin: 30px 120px 20px 120px; } img.left3 { float: left; margin: 0 110px 0 110px; } img.right3 { float: right; margin: 20px 60px 0 60px; } hr { display: none; } /* Header */ #header { width: 1030px; height: 260px; margin: 0 auto; background: url('images/img02.jpg') no-repeat right top; } /* Menu */ #menu { float: right; width: 1030px; height: 40px; padding: 220px 0 0 0; } #menu a { display: block; height: 32px; background: url('images/img06.gif') no-repeat; text-decoration: none; font-size: 13px; font-weight: bold; color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0 } #menu ul { width: 1026px; height: 40px; margin: 0; padding: 0; background: #AD1011 url('images/img05.jpg') repeat-x; border-left: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; list-style-type:none } #menu li { margin: 0; padding: 0; list-style: none; float: left; } #menu li a:hover { color: #123456;} #menu div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #000000; } #menu div a { position: relative; display: block; margin: 0; padding: 3px 10px; width: auto; height: 20px; white-space: nowrap; text-align: left; background: #6c91c5; color: #ffffff;} #menu div a:hover { color: #123456;} /* Page */ #page { width: 1030px; margin: 0 auto; } /* Content */ #content { float: left; width: 990px; padding: 20px; background: #FFFFFF url('images/img07b.gif') no-repeat left bottom; } /* Footer */ #footer p { margin: 0; line-height: normal; font-size: 85%; color: #000000; } #footer a { color: #000000; } #footer a:hover { color: #666666; } Hi everybody, The basic set up of a site I'm creating is I have a div with a table inside it both set to 1000px wide. Within the table are the images that make up the background of the site. Also within the core div is another div which contains a music player set to absolute positioning. Everything looks perfect in IE however the music player goes beyond the bottom of the image behind it in Firefox. The music player itself doesn't move, only the pictures behind it so that leads me to believe it's an issue with where the starting point of the table is rather than the core div. I'm completely out of ideas. Does anybody have any thoughts? I tried to include a link to the page incase anybody wanted to look at the actual coding but the forum wouldn't allow me since I'm a new user. On the mouseover of text in one table/cell, I'm looking to change the background color of a cell in a different table. The code below works in Chrome & IE 8 but not Firefox (3.6.2) I tried it with javascript also. 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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .hlt { background-color: yellow; color: black; } #testtag { color: #666; position: absolute; top: 44px; left: 0px; text-align: center; } #maintag { color: #000; position: absolute; top: 100px; left: 0px; background-color:#CC6 } </style> <script type="text/javascript"> function mouse_event(obj, newClass) { obj.className = newClass; } </script> </head> <body> <div id="maintag"> <table width="900" height="37" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="150" id="cellone"> </td> <td width="150" id="celltwo"> </td> <td width="150" id="celltre"> </td> <td width="150" id="cellfour"> </td> <td width="150" id="cellfive"> </td> <td width="150" id="cellsix"> </td> </tr> </table> </div> <div id="testtag"> <table width="900" height="37" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="150"><a href="#" onmouseover="cellone.className = 'hlt';" onmouseout="cellone.className = '';">Data 1.1</a></td> <td width="150"><a href="#" onmouseover="celltwo.className = 'hlt';" onmouseout="celltwo.className = '';">Data 1.2</td> <td width="150"><a href="#" onmouseover="mouse_event(celltre, 'hlt');" onmouseout="mouse_event(celltre, '');">Data 1.3</td> <td width="150"><a href="#" onmouseover="cellfour.className = 'hlt';" onmouseout="cellfour.className = '';">Data 2.1</td> <td width="150"><a href="#" onmouseover="cellfive.className = 'hlt';" onmouseout="cellfive.className = '';">Data 2.2</td> <td width="150"><a href="#" onmouseover="cellsix.className = 'hlt';" onmouseout="cellsix.className = '';">Data 2.3</td> </tr> </table> </div> </body> </html> I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */ #nav { width: 821px; height: 18px; border: 1px; border-style: solid; border-color:red; } #nav ul { } #nav li { display:inline; float:left; background-color:#9E0C0C; text-align:center; color:white; font-family: arial, san-serif; font-size: 14px; font-variant: small-caps; } and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) I'm using a CSS-based tooltip on a page I'm developing, and it displays fine on IE (v8), but on Firefox (v3.6.2) there is an additional 25 pixels or so of padding/margin at the right. I can't for the life of me work out why, so if anybody wouldn't mind taking a look at the page in question and seeing if they can fix what I'm sure is a relatively simple problem, I'd greatly appreciate it: As this is my first post, I'm not allowed to post the URL of the page I'm having problems with, so please PM me if you're interested in taking a look. Thanks, Mark I am having a problem displaying text under images in IE, it looks fine on FF though. In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE? Here is an example page product_info.php?products_id=209 And this is the stylesheet stylesheet.css Any help would be much appreciated. Thanks Peter PS. Looks like I am not allowed to post links yet, I can send them to you if you like? |