CSS - Tab Looks Right In Firefox But Minor Glitch In Ie
Hey guys...I've been wrestling around with this problem for a few hours now. The below link shows a rounded corner tab that looks fine in firefox, but has a slight problem in IE. Thanks in advance for anyone who has any ideas. Code can all be seen when viewing source.
http://www.vainglore.com/vain_new/test_tab.html Similar TutorialsLong title I know... My problem is that I want a particular style for a link BUT it seems that Firefox has a glitch with it. The css code is: Code: a, a:link, a:visited { color: #000; text-decoration: none; border-bottom: 2px solid #000; } a:hover { color: #28f; border-bottom: 0; } Basically Firefox starts "flashing" the cursor simply just by hovering over the link. It only does this if you hover over the "line" part of the link. Here's an image of what it looks like: You can view this yourself on the page http://www.jasonashdown.co.uk/css_glitch.html I did however find a way around it with css code: Code: a:hover { color: #28f; border-bottom: 2px solid transparent; } http://www.jasonashdown.co.uk/css_glitch_solution.html This works fine in Firefox and Opera without displaying the glitch. BUT now IE won't accept it (putting a Doctype in the file seems to make the bottom-border disappear). Can anybody explain to me why Firefox has this glitch? I couldn't find anything about this problem on this forum or through google. It has been bothering me for months. Many Thanks in advance I'm just taking the plunge from tables to CSS. So far, so good (I think.) Anyway, the site I'm working on looks fine in IE/Mozilla/Opera/Safari, but in IE 5.2 for the Mac, the div containing the text shifts off-center to the right. Any help on correcting this or improving the page is appreciated. I've included a link to the page & the stylesheet is included below. Website Link #about { position: absolute; left: 181px; top: 110px; width: 181px; height: 141px; } #aboutcont { background-color: #FFFFFF; position: relative; height: 600px; width: 724px; border: 1px solid #000000; margin: 0px auto; top: 30px; padding: 0px; overflow: visible; } body { background-color: #999999; background-image: url(images/bg.jpg); text-align: center; } #contact { position: absolute; left: 543px; top: 110px; width: 181px; height: 141px; } #contactcont { background-color: #FFFFFF; position: relative; height: 580px; width: 724px; border: 1px solid #000000; margin: 0px auto; top: 30px; padding: 0px; overflow: visible; } #contacttext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: left; top: 265px; position: absolute; background-color: #E5E2E2; border: double; height: 265px; left: 3%; right: 3%; padding: 3px; } #client { position: absolute; left: 362px; top: 110px; width: 181px; height: 141px; } #disclaimer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align: left; top: 290px; position: absolute; padding: 3px; left: 3%; right: 3%; border: 1px dotted; } #ftr { position: absolute; top: 518px; left: 45px; } #ftrabout { position: absolute; top: 578px; left: 45px; } #ftrcontact { position: absolute; top: 558px; left: 45px; } #ftrindex { position: absolute; top: 365px; left: 45px; } #main { background-color: #FFFFFF; position: relative; height: 540px; width: 724px; border: 1px solid #000000; margin: 0px auto; top: 30px; padding: 0px; overflow: visible; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-variant: small-caps; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #000000; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-variant: small-caps; color: #000000; text-align: right; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #000000; } #hdr { position: absolute; left: 25px; top: 25px; width: 282px; height: 74px; } #index { background-color: #FFFFFF; position: relative; height: 400px; width: 724px; border: 1px solid #000000; margin: 0px auto; top: 30px; padding: 0px; overflow: visible; } input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; } input.button { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; border: 1px solid #000000; background-color: #FFCC99; } #noel { float: right; } #noelp { text-align: right; } #practice { position: absolute; left: 0px; top: 110px; width: 181px; height: 141px; } #robert { float: left; } table { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } #text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: left; top: 265px; position: absolute; background-color: #E5E2E2; border: double; height: 225px; padding: 3px; left: 3%; right: 3%; } #textabout { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: left; top: 265px; position: absolute; background-color: #E5E2E2; border: double; height: 285px; left: 3%; right: 3%; padding: 3px; } textarea { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; } ul { list-style-type: circle; line-height: 18px; text-align: center; } Hey guys, So if you check out my site at www. paulfenton .tk you can see that I have gone for a slightly different design, with my site entirely encapsulated inside the main page, and the scrolling happening within a contained region. I have turned off the main scrolling I think... however a glitch happens for chrome when you try to select everything in thewindow.(click near the top of the window and hold while moving the mouse downwards). What happens is the whole page scrolls down, which I want to prevent. I have a feeling this is because I have images extending past the visibility of the main screen, but I need this so that everything still looks good for very large screens/resolutsion. If anyone can reproduce this glitch and can help me prevent it that would be greatly appreciated. Thanks, -Paul Hello All, I've been messing with this for quite some time now. Basically, I'm trying to remove this small jumping effect that the nav bar takes on when the page loads. Here is a sample test If you reload it, you can see there is a subtle jump. I find this becomes a lot more noticeable on pages with heavier content such as Buffing. I'm sure there is a way to make this more solid/stable.... Can anyone provide any insight on how to remedy? Note: Notice how in this example; http://www.html.it/articoli/niftycube/nifty4.html , the boxes do not glitch, they are solid... But here they do; http://www.html.it/articoli/niftycube/nifty5.html I'm not sure why though and what I might be doing wrong here... Best, Colin I'm using absolutely positioned divs as a dropdown subnavigation. While I have yet program the javascript functionality that will make these divs appear and disappear, I am currently working on placing the divs just right on the page. (The simple part, right?? Right...) Check out this page: http://www.psd7.com/fst/www_live/ It shows one of my subnavigation divs (the rest are hidden). On most browsers, when you roll over the Our Tradition button on the left, the horizontal line lines up perfectly with the top of the subnavigation. However, on the most commonly used browser on the planet (IE for Windows), these things are not lined up, but are slightly offset. I can't imagine how to work this out. If I change the top value for the subnav so it lines up in IE for Windows, then it won't line up in any of the other browsers. Here's the css code: Code: #subnav_our_tradition { position: absolute; left: 155px; top: 230px; width: 137px; background-color: #7C272D; z-index: 3; } Here's the HTML code regarding that one subnav: Code: <div id="subnav_our_tradition"> <div class="subnav_item"><a href="our_tradition/intellectual_tradition.htm">The Franciscan Intellectual Tradition</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/mission.htm">Mission Statement</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/community_life.htm">Community Life</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/resources.htm">Resources</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/links.htm">Links</a></div> </div> Can anyone suggest a workaround? Hello, first post here =) I'm having a margin/border problem where it is showing up the way I want it to in IE but not in FF. Here is the URL: http://www.prj2501.com Here is the CSS: http://www.prj2501.com/puppetmaster.css DOCTYPE is XHTML-STRICT In IE you will notice the extra border below the nav followed by the padding for the content ID which places the H3 where I want it. In FF, the border and the padding are both gone. In trying to debug this, I notice nothing I do above the H3(padding,margin,etc.) takes effect in FF...yet left and right padding do. The only way to get it to move down is BR tags and I'd rather not do that. Any ideas, suggestions? I am just now getting the hang of CSS so if you see anything glaring that does not seem best-practice, by all means point it out. Thanks in advance. I have followed the sliding doors tutorial for CSS tab navigation (see http://alistapart.com/articles/slidingdoors for the article, and http://alistapart.com/d/slidingdoors/v1/v1.html for the final solution that I'm attempting to duplicate), and attempted to make a few minor tweaks. For the most part everything works great, but I have not been able to figure out 2 issues: 1) Why are the small crevices between the tops of the tabs (created by the rounded edges) white on my page (http://www.familystudies.info/CSSTabs) but match the background on the sliding doors tutorial http://alistapart.com/d/slidingdoors/v1/v1.html? (I can't find where any of my code is different.) 2) I attempted to tweak the sliding doors solution by adding more of a rollover effect on non-current tabs. Specifically, I changed the tab color (background image) instead of just the tab text color. This works for everything except the left_on.gif image. My current code for changing that is "#header li:hover {background:url("left.gif") no-repeat left top;", and I have tried several other variations, but nothing seems to work. Thanks, Jason 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. Can someone please help me, i am desparate to intergrate transparency into my forum but im finding out what a pain in the *** it is. I tried semi transparent png's, but they only work in firefox and IE7 but most people are using IE6 (42.3%). I looked around on the internet for a fix that solves the ie6 png transparency issue but i didnt find one that shows it as semi transparent and doesnt bugger all of the links. Now ive moved onto CSS, ive found a solution that works great for IE 6 + 7 but not firefox. What happens is i apply a transparent css to the pagebackground: Code: filter:alpha(opacity=50); opacity: 0.5; but it applies it to everything on top as well. To get around this i apply a non transparent css to everything on top: Code: filter:alpha(opacity=100); opacity: 1; This works fine in IE making the background transparent and the contents on top solid but in firefox everything (including the content and the background) is transparent. Is there anything i can do to get around this? Its getting really annoying! Any help you can give would be much appreciated. James 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 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 I built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong? Please can someone tell me what I must do to get the code working in both IE and Firefox. 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? users.accesscomm.ca/kendemchuk/test/education_tmp.html preview in firefox and IE. Lines appear in IE but not firefox This is related to the display of a text box on mouseover. why ?? is there a better method ?? 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 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. |