CSS - Css Site Shows Correct In Firefox But Wrong In Ie
The website
Quote: downloadwarez.org CSS Quote: /* default styles */ body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; } a { color: #2F637A; background: inherit; } a:hover { color: #808080; background: inherit; } p { margin: 0 0 5px 0; } h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; } h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; } h1 a, h2 a { color: #000; background: inherit; text-decoration: none; } ul { margin: 0; padding : 0; list-style : none; } img { border: 0; } /* layout */ #content { margin: 10px auto; width: 960px; } #logo { margin: 0 0 10px 0; } #slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; } #top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; } /* round blue login button */ #loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; } #loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;} /* main horizontal menu */ #tablist{ padding: 3px 0; margin: 0; float: left; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ text-decoration: none; padding: 4px 22px; margin-right: 2px; background: #808080 url(images/corner.gif) no-repeat top right; font-weight: bold; color: #fff; } #tablist li a:hover{ background: #6495AB url(images/corner.gif) no-repeat top right; color: #fff; } #tablist li a.current{ background: #9FC7D8 url(images/corner.gif) no-repeat top right; color: #2F637A; padding: 6px 22px; } #tablist .key { text-decoration: none; } /* main menu topics */ #topics { clear: left; float: left; width: 640px; background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom; padding: 8px 5px; margin: 0 0 5px 0; color: #fff; height: 59px; } #topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; } /* main menu search */ #search { float: right; text-align: right; background: #fff url(images/searchbg.gif) no-repeat; color: #000; padding: 32px 20px 12px 20px; min-height: 32px; /* FF height */ height: 25px; /* IE height */ width: 270px; } /* search form styling */ form, form p { margin: 0; padding: 0; line-height: 25px; } .search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; } .button { padding: 4px; font: bold 1em Arial, Sans-Serif; } /* left side */ #left { float: left; width: 635px; margin: 0 0 10px 0; } .subheader { margin: 0 0 10px 0; padding: 8px; background: #f4f4f4 url(images/bgshade.gif) repeat-x; color: #808080; border-bottom: 1px solid #ccc; } .left_articles { margin: 0px 0 10px 0; background: #fff url(images/bgshade.gif) repeat-x; color: #454545; padding: 15px 15px 5px 10px; } .date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; } .bigimage { float: left; clear: left; border: 1px solid #ccc; background: #eee; color: #000; width: 200px; height: 150px; margin: 0 15px 10px 0; } .left_box { background: #f4f4f4; color: #808080; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 15px; margin: 0 0 15px 0; } .thirds { float: left; width: 186px; padding: 0 10px 0 15px; } /* right side */ #right { float: right; width: 310px; margin: 0 0 10px 0; } .right_articles { border: 1px solid #ccc; padding: 8px; margin: 0 0 10px 0; background: #eee; color: #454545; } .image { float: left; margin: 0 9px 3px 0; } .notes { border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 17px 10px 17px 80px; margin: 0 0 10px 0; background: #fff url(images/notes.gif) no-repeat center left; color: #454545; } /* footer */ #footer { clear: both; color: #808080; background: #FFF; padding: 10px 15px; border-top: 1px solid #ccc; } #footer .right { float: right; } The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera. The code looks ok, so i think it must be CSS. Can anyone help Similar TutorialsHi, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text... I am very frustrated, please help me. Here's the code for the HTML: 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>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { text-align: center; margin: 0; background-color: #9e0b0f; background-image: url(images/back.jpg); background-repeat: repeat-x; } </style> </head> <body> <div class="div-header"></div> <div class="div-middle"> <div class="div-logo"> <p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p> <p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br /> <img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br /> <img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br /> <img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p> </div> <div class="div-text"> <p>The Outsourcing Company is your business partner for:</p> <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p> <p>We have two goals:</p> <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p> </div> </div> <div class="div-footer"></div> </body> </html> And this is the CSS: Code: .div-header { background-image: url(images/header-blank.jpg); background-repeat: no-repeat; margin: auto; height: 164px; width: 800px; } .div-footer { background-image: url(images/footer.jpg); background-repeat: no-repeat; margin: auto; height: 48px; width: 800px; } .div-logo { height: 55px; width: 193px; margin-left: 40px; text-align: right; float: left; margin-top: -120px; } .div-text { float: left; text-align: left; width: 485px; padding-left: 30px; font-family: "Myriad Pro"; font-size: 13px; margin-top: -108px; } .div-middle { background-image: url(images/middle.jpg); background-repeat: repeat-y; margin: auto; width: 800px; height: 1000px; } Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated. My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site... I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla. I am new to using CSS and I'm sure that something is off somewhere in the code. Thank in advance for any help. Feel free to e-mail me he dekay@baltimoregamers.com Hi- I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting): 01f086d.netsolhost dot com/yk/services dot html 01f086d.netsolhost dot com/yk/experience dot html 01f086d.netsolhost dot com/yk/principals dot html It seems to be the page length that is causing this, because on shorter length pages, there is no chunk. I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C). Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it! Edit: Problem solved This topic can be locked or deleted. I tried everything and figured out the problem a site im working on .. (apparently I cant post URLs....) it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end. works fine in Firefox. I validated with transitional. In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost. Quote: #bg { position: absolute; top: 0px; left: 0px; background: #fff url('images/bg.png') no-repeat; width: 747px; height: 264px; } #wrapper { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.png') repeat-y; } that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.) any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to. thanks in advance. I have the following code which works fine in IE but not in firefox. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"> <tr><td></td></tr> </table> IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table. Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. On my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.! http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden. Well, I'm redesigning my site because the current php management system was thrown together in a hurry just to get it up there. Now I've got time to redo it and I want to do it right. It's a webcomic site. Currently, the site has an XML layout that serves XHTML after a serverside transformation. What I want to do is lay the site out now so I can define my xsl. The basic "gist" of the situation is, i want it to be as accessible as possible(even though blind people may not be able to see the images, they deserve to surf my website.). With that, I want my content to show up before my link area, so they can easily get to the content without listening to a long list of links first. So what I've done in firefox was repositioned the div tags that held the content above the div section that held the link boxes. That's fine and dandy, where's my point? I still want the linkboxes to appear on the lefthand side of the page and the content on the right. In firefox, I used float:right;margin-right:5%; for the content and float:left on the link boxes. It works fine in firefox. The boxes appear on the left and content on the right. However, in IE the content appears on the right, but the link boxes appear on the left of the next line. Here is relelvant code: html Code: Original - html 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> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>AdrienComix</title> <style type="text/css"> #body{ margin:0; } .header{ margin-bottom:10px; width:100%; height:15%; color:#000000; background-color:#00BBFF; background:url(http://www.adriencomix.com/res/head.jpg); border:1px dashed; text-align:center; font-size:20pt; } .box{ border:1px dashed; margin-bottom:30px; margin-left:2px; padding-left:5px; width:100%; background-color:#00BBFF; color:#000000; } .left{ width:15%; height:85%; float:left; } .content{ width:74.6%; height:100%; margin-left:5%; float:right; padding-right:5%; } .comic{ text-align:center; padding-top:15px; padding-bottom:15px; } .emp{ text-align:center; padding-top:20px; font-size:150%; font-weight:bold; } </style> </head> <body id="body"> <div class="header"><p>AdrienComix</p></div> <div class="content"> <div class="emp">Happy New Year!</div> <div class="comic"><img src="http://adriencomix.com/res/comics/01012006.JPG" alt="Happy New Year!"/></div> <div class="comments">Happy New Year! It's 2006 now. In a few short days, school starts back up.</div> <div class="copyright">Copyright 2005-2006 Adrien J. Howard of Underscore, Inc. Some images are property of Sega as well as SQUARE ENIX.</div> </div> <div class="left"> <div class="box"> <center><h3>Links</h3></center><br/> <a href="http://www.sluggy.com">Sluggy Freelance</a><br/> <a href="http://www.nuklearpower.com">8-bit Theater</a><br/> <a href="http://www.slackware.com">Slackware Linux</a><br/> <a href="http://www.gnu.org">GNU</a><br/> <a href="http://www.kernel.org">Linux Kernel</a><br/> <a href="http://www.google.com">Google</a> </div> <div class="box"> <center><h3>Archive</h3></center><br/> <a href="http://www.adriencomix.com/index.php?comic=10">#10</a><br/> <a href="http://www.adriencomix.com/index.php?comic=9">#9</a><br/> <a href="http://www.adriencomix.com/index.php?comic=8">#8</a><br/> <a href="http://www.adriencomix.com/index.php?comic=7">#7</a><br/> <a href="http://www.adriencomix.com/index.php?comic=6">#6</a><br/> <a href="http://www.adriencomix.com/index.php?comic=5">#5</a><br/> <a href="http://www.adriencomix.com/index.php?comic=4">#4</a><br/> <a href="http://www.adriencomix.com/index.php?comic=3">#3</a><br/> <a href="http://www.adriencomix.com/index.php?comic=2">#2</a><br/> <a href="http://www.adriencomix.com/index.php?comic=1">#1</a><br/> </div> </div> </body> </html> Is there any way that I can make it appear on the same line in IE without breaking the layout in firefox and keeping the page accessible? i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post. Site url: www.plumstead-mosque.co.uk Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button similarly that donate button is also a form but border isnt going around it... problem3: submenu font appears a bit smaller (in IE) problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more. In Opera9.0 it looks very messy. IE: http://browsershots.org/screenshots...1b07da5ea24003/ Opera: http://browsershots.org/screenshots...e171bac56fbf14/ Original: http://www.zahra-zahra.com/aboutus.php my page displays properly, except for a few items/buttons. Please look at this url http://www.hospitaltvrental.com/Main1.html, you'll see what I'm talking about. I wonder why it's ok in IE, and not in Firefox, anything I should know or do ? Thanks. Dave Here's only part of the css. Code: ..... #box {position: relative; width:850px; margin: 0 auto; text-align:left;} #myButtons{ position: absolute; width: 320px; top: 340px; left: 25px; } ..... and the according HTML... <div id="myButtons"><a href="http://www.transactionsintercite.com/hopitel/giftmenu.php?lag=en"><img src="../images/loccadbuttonen.jpg" border="0" alt="Gift TV Rental Package" class="img_dessous"/></a><a href="http://www.transactionsintercite.com/hopitel/persmenu.php?lag=en"><img src="../images/locpersbuttonen.jpg" alt="Personal TV Rental Package" border="0" class="img_dessous2"/></a></div> I am newbie in CSS but I do not want to surrender to use tables. In Explorer it is seen OK but is wrong in Firefox. Why? URL URL www.lekunberri.com/focesdelcamino/mapa.asp?id=31 There is div called "mapaaundi" with relative positioning that contains images as fragments of a map. Inside there are some images (arrows) of the class "boloaundi", with absolute positioning. I have previously tried something similar to this and works well. Thanks in advance! 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! 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 dont know why it is doing this in firefox here is my css coding then is my html file coding Code: #header { width: 800px; height: 164px; margin: 0px; padding: 0px; background: red url(images/header.jpg); } #menubox { width: 215px; height: 194px; margin: 0 0 0; padding: 0px; background: blue url(images/menu.jpg); } #menu-in { width: 73px; height: 158px; padding: 0px; margin-left: 41px; margin-top: 16px; background: red; } #banner { width: 585px; height:194px; margin-left: 215px; margin-top: -194px; background: green url(images/banner.jpg); } #sidepic { width: 165px; height: 692px; background: green; } #sidepic-in { width: 127px; height: 634px; margin-left: 19px; margin-top: 29px; background: brown url(images/sidepic.jpg); } #main { width: 413px; height: 692px; margin-left: 165px; margin-top: -692px; background: purple; } #main-in ( width: 378px; height: 628px; margin-left: 18px; margin-top: 32px; background: red; } #pictures { width: 222px; height:505px; margin-left: 578px; margin-top: -692px; background: blue; } #pictures-in ( width: 171px; height:424px; margin-left: 22px; margin-top: 60px; background: red; } #links { width: 222px; height: 187px; margin-left: 578px; background: red; } #footer { width: 800px; height: 50px; background: yellow; } { Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="header"> </div> <div id="menubox"> <div id="menu-in"> </div> </div> <div id="banner"> </div> <div id="sidepic"> <div id="sidepic-in"> </div> </div> <div id="main"> <div id="main-in"> </div> </div> <div id="pictures"> <div id="pictures-in"> </div> </div> <div id="links"> </div> <div id="footer"> </div> </body> </html> First Issue In this site the Left Navigation top and bottom spacing is somewhat off. First head over to this page: http://www.pricedigital.com/ejs//ad...weight-loss.htm In firefox the navigation ends up being a tad too low, but the way it looks in ie6 and ie7 is how I want it to look in firefox. Any suggestions? This all takes place in sidebar1 Next Issue How do I center an image using just css? Final Issue In IE6 the floated right photos on a few of these pages do not show up correctly. Here is one for example: http://www.pricedigital.com/ejs//ad...lds-pallant.htm How can I go about fixing this? 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 |