CSS - Ff Is Display Pages Wider Than Chrome Or Ie
For some reason, FF is displaying the web pages bigger than chrome or IE. I'm reviewing the site CSS with firebug on both FF and chrome but can't seem to find why its pages are different sizes on different browsers. It seems the seems either FF is scaling it up or IE and Chrome are scaling it done.
The other question is, which browser(s) are displaying the real size of the webpage? Any help would be greatly appreciated! http://50.116.66.243/~ab27853/ Thanks. Similar TutorialsMy website open fine in pretty much everything except IE (Ie is terrible). I tried to use the "if ie" stylesheet link but its not working. Help please. Test server is http://ivorygaming.clanservers.com/debuhrs HTML Code: <html> <head> <title>deBuhrs Seed & Feed</title> <!--[if IE 7]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> </head> <body bgcolor="#070707"> <div id="navbar"><ul id="navbar"> <li><a href="index.html"><span id="green">H</span><span id="white">ome</span></a></li> <li><a href="about.html"><span id="green">A</span><span id="white">bout</span></a></li> <li><a href="staff.html"><span id="green">S</span><span id="white">taff</span></a></li> <li><a href="products.html"><span id="green">P</span><span id="white">roducts</span></a></li> <li><a href="contact.html"><span id="green">C</span><span id="white">ontact</span></a></li> </ul> <div id="logo"></div> <div id="front"></div> <div id="side"></div> <h2>New Website</h2> <hr color="#b9bab9" width="60%" align="left" height="50%"> <p class="postinfo">posted by Bernie deBuhr at 10.39 p.m. Sunday, July 4th, 2009</p> <p class="content">    deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.</p> <div id="bottom"></div> <div id="container"></div> </body> </html> ie.css Code: @charset "utf-8"; /* CSS Document */ body { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; text-align: center; } #container { width: 1024px; height: 15px; margin: 0 auto 0 auto; text-align: left; } #logo { height: 112px; width: 702px; padding-bottom: 0px; padding-top: 0px; margin-top: 1000px; margin-left: -200px; background: #FFF url('images/logo.png') ; } #front { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/front.png') ; } #side { height: 444px; width: 312px; padding-bottom: 0px; padding-top: 0px; margin-top: -269px; margin-left: 700px; background: #FFF url('images/side.png') ; } #block { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -177px; margin-left: 10px; background: #FFF url('images/block.png') ; } #block1 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 124px; background: #FFF url('images/block.png') ; } #block2 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 238px; background: #FFF url('images/block.png') ; } #block3 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 352px; background: #FFF url('images/block.png') ; } #block4 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 466px; background: #FFF url('images/block.png') ; } #navbar ul li { padding-left: -10px; position: relative; display: inline; padding-top: 383px; color: #FFFfff; float: left; font-size: 10pt; font-family: arial; font-style: italic; margin-left: 15px; } #green { color: #9bf006; font-size: 11pt; font-family: arial; font-style: italic; } #white { color: #c8cbc3; font-size: 9pt; font-family: arial; font-style: italic; } a { text-decoration:none; color:#930; border-bottom: 1px solid #5b8c04 } h1,h2,h3,h4,h5 { margin:0; text-align:left; color:#9bf006; font: arial; margin-top: -100px; margin-left: 15px; } p.postinfo { margin:0; text-align:left; color:#a0a19e; font: arial; margin-top: 0px; margin-left: 35px; font-size: 8pt; } p.content { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 15px; margin-left: 40px; font-size: 10pt; width: 600px; height: 200px; } p.phone { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: -180px; margin-left: 40px; font-size: 10pt; } p.email { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 3px; margin-left: 40px; font-size: 10pt; } #bottom { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/bottom.png') ; } Hi All, I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone). The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK). The CSS for the element is: CSS Code: Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;} .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} The html for the element is: html Code: Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> The image stretches - it works fine on firefox and IE8. The web address is www.wellandpower.net There are 3 of these html elements on the left hand side of the page. TIA Regards Charlie Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE. Here is my site: Well I guess I can not link my site, but hopefully someone can still help me. Here is my code: Quote: /* Tabs ==================== */ #homepagetabs { border-bottom: none; margin-bottom: 10px; padding-left:170px; height:51px; background:transparent url } #homepagetabs li { display: inline; list-style-type: none; margin-top: 14px; border: none; border-bottom: none; float: center; line-height: 14px; margin-right: 8px; text-decoration: none; cursor: pointer; color:#fff; background: none; font-weight:bold; font-size:12px; } #homepagetabs li.currenttab { margin-top: 14px; background: none; border: none; border-bottom: none; font-weight:bold; color:#fff; font-size:12px; text-decoration:underline; } #options_69 th { font-size: 100%; } Hi, well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome. here is the test page http :// letseedrop.blogspot.com/2011/01/testing-8. html i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped. well i am pasting css here too if you don't want to go into the source code Code: .demosa { position:relative; top:0px; left:0px; margin:0px; padding:0px; } .gamedetailpara { text-decoration:underline; color:#000000; } ul.gamecolumns { min-height:300px; list-style: none; margin: 0px; padding: 0px; } ul.gamecolumns li { background:url('(URL )) no-repeat; position:relative; display: inline; width: 114px; height:118px; float: left; margin: 8px; padding: 0px; } ul.gamecolumns li:hover { z-index: 99; } ul.gamecolumns li img { position:relative; top:12px; left:12px; filter: alpha(opacity=100); opacity: 1; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/ } ul.gamecolumns li:hover img{ position:relative; top: 12px; left:12px; z-index: 999; filter: alpha(opacity=100); opacity: 1; -ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)"; } ul.gamecolumns li .gamedetails { position: relative; left: 0px; top: 0px; padding: 20px 4px 10px 10px; display:none; background:#ffffff; font:bold 13px "Times New Roman", Times,sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 99999; } ul.gamecolumns li .gamedetails:hover { display:none; } ul.gamecolumns li:hover .gamedetails {display: block;} ul.gamecolumns li:hover .gamedetails:hover {display: none;} thank you in advance. Hi, I'm relatively new to web development and I am self taught so please forgive any noobish comments haha. Basically I am building my company's web page and I have it all done except for one small discrepancy. My navigation bar at the top of the page has 4 links to the various sections of the website and they are in the right place in Safari, Chrome, Firefox, and Opera but in IE they are all out of whack. I've been banging my head against the desk trying to figure out whats wrong with either my CSS file or HTML code with no luck. I've validated both my CSS and HTML on the W3C validators and they come back with no errors. Not even a warning. Its all valid code. So I've heard this is common when dealing with compatibility issues that IE is the worst. So could someone please take a look at my code and see if they can find out whats wrong? Here is my CSS... #navbar { font-family: "Frutiger LT 55 Roman", Arial, sans-serif; height: 103px; width: 792px; padding-bottom: 0px; background-color: #0097c6; } #bigpic { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #leftcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 15px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #rightcol { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #threecol-mid { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 10px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #threecol-right { color: #585858; font-size: 10pt; width: 195px; padding-top: 24px; padding-left: 5px; padding-right: 5px; margin-bottom: 30px; font-family: Arial, sans-serif; float: right; } #leftcol-nohead { color: #585858; font-size: 10pt; width: 365px; padding-top: 24px; padding-left: 5px; padding-right: 7px; margin-bottom: 30px; font-family: Arial, sans-serif; float: left; } #footer { width: 792px; padding: 0px 0px 0px 0px; margin: 0px 0px 10px 0px; color: #999999; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 8pt; border-top-style: dotted; border-top-color: #999999; border-bottom-style: dotted; border-bottom-color: #999999; border-width: thin; clear: both; } .logo { padding-top: 18px; padding-left: 10px; padding-right: 10px; float: left; } #navlinks { padding-top: 4px; padding-right: 5px; margin-bottom: -4px; position: relative; float: right; } .allcontent { width: 800px; margin-left: auto; margin-right: auto; } h2, h3, h4, h5 { margin-right: 1px; margin-left: 0px; margin-bottom: 0px; margin-top: 1px; padding-bottom: 0px; padding-top: 0px; font-family: Arial, sans-serif; } .heading1 { font-family: Arial, sans-serif; font-size: 16pt; } .heading2 { font-family: Arial, sans-serif; font-size: 10pt; font-weight: bold; } a { text-decoration: none; color: #0097c6; } img { border: 0; } .disclaimer { font-family: inherit; font-size: xx-small; } The problem lies with the navlinks ID I think. Basically, IE doesn't put the images (which are also links) where I want them while all the other browsers do. Something funky about the way IE reads CSS maybe? I don't know. If more info or code is needed I'll gladly provide. Thanks in advance, Griz I have a data table that has many rows and columns. When it is rendered in IE, it falls down below the left-hand navigation, as it is wider than its containing div. In firefox, it simply grows wider (to the right) than it's containing div. How do I replicate the firefox rendering in IE6? Any help much appreciated. RB I could use some help testing out a css box that's been breaking on large screen res's. Its a sliding door effect as the page gets wider made with 800px wide images. I added max-width: 1600px to my container I'm hoping that fixed it. Quote: #container{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 1600px; } I've just stripped a design, due to PNG 24 transparency rendering issues in IE ~ and now have a brand new IE related problem. In order to make the page readable prior to design elements loading, the container div has a different background color to the dark body background. In IE only [up to & inc. version 6], once the page is fully loaded, the background of that div is wider than the elements it contains, leading to an ugly white strip down the right edge of it. This is only happening in IE. Does anyone know how I can get rid of the white strip? Thank you The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE? mediacontour.com/TCS/frequently-asked-questions.php hi. I built a flash website with a resolution of 1920x1200. The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768. How can i upload this website and in the browser to shown always the middle of the flash? I hope this is possible. thanks! This is the line in my index.html: PHP Code: <PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> This is my PRE code in style.css: PHP Code: PRE { BORDER-RIGHT: #2f6fab 1px dashed; PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9; width: 90%; } PRE.yup { COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; text-align: left; width: 80%; margin: 12px auto; } The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas? I have a problem with this site - shop dot meenola dot com (Sorry - i am a new member and therefore cannot post a proper URL) - In FF the page is always scrollable to the right although there is nothing there and as far as i can tell the HTML ends in the initially viewable area. Not usually a problem for most - but using a macbook scrollpad, you tend to fly "offscreen" rather easily. Have tested in Chrome, IE, Opera and Safari - all of which display correctly (The page ends when the HTML does). Any ideas? Thanks /Adam Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser). Anyone any ideas what could be causing this, or a solution to this problem? Many thanks Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? Thanks for taking the time to read my question. I'm having to update a site I did a while ago, and am now quite out of practice, as I've done nothing since. I made the site before Chrome was released, and now, since I'm updating it, would like to make sure it displays properly in Chrome as well. I have buttons for my top nav, that when you hover over them increase in size. The text on the button is not a part of the image. The text in question is "Contact Us" in FF and IE the text wraps after Contact, with the Us underneath it. In Chrome it stays on one line. If I decrease the size of my <div> by one pixel the text wraps in Chrome. I can't do that though as it shaves off one pixel of my button image. I can't seem to find a site that will tell me what the difference is between Chrome IE and FF. Here is my css and html for my nav if it helps. attached is a pic of the difference. The red is to sho the navcontainer div. Notice the difference in the Contact Us button. Thanks, Brad HTML: Code: <div id="navcontainer"> <ul> <li class="Active OneLineAct">Home</li> <li class="NotActive1 OneLine"><a href="ZoneAll-Products.htm">Products</a></li> <li class="NotActive1 TwoLine"><a href="ZoneAll-ContactUs.htm">Contact Us</a></li> <li class="NotActive2"><a href="wadsz3000.htm">Wiring Diagrams</a></li> <li class="NotActive1 TwoLine"><a href="stahr.htm">What’s New</a></li> <li class="NotActive2"><a href="application.htm">Sample Specs</a></li> <li class="NotActive2"><a href="tshooting.htm">Trouble Shooting</a></li> </ul> </div> CSS: Code: #navcontainer ul { margin: 10px 8px 0px 0px; padding: 0px; /*background-color: transparent;*/ background-color:red; color: #000000; width: 728px; font-family:Arial, Helvetica, sans-serif; float: right; } #navcontainer ul li { display: inline; } #navcontainer ul li.Active { text-decoration: none; text-align: center; float: left; width: 104px; height: 70px; background-image:url(Images/BigBlueButton.jpg); background-repeat:no-repeat; background-position:top; /*letter-spacing: .1em;*/ /*padding: 20px 0px 0px 0px;*/ margin: 0px 0px 0px 0px; font-size: 22px; } #navcontainer ul li.OneLineAct{ padding: 20px 0px 0px 0px; } #navcontainer ul li.TwoLineAct{ padding: 10px 0px 0px 0px; letter-spacing: .11em; } #navcontainer ul li.NotActive1 a { text-decoration: none; color: #000000; text-align: center; float: left; background-image:url(Images/SmallBlueButton.jpg); background-repeat:no-repeat; background-position:top; width: 79px; height: 53px; margin: 10px 12px 0px 13px; font-size: 14px; } #navcontainer ul li.NotActive2 a { text-decoration: none; /*color: #000000;*/ color:#990000; text-align: center; float: left; background-image:url(Images/SmallBlueButton.jpg); background-repeat:no-repeat; background-position:top; width: 79px; height: 53px; letter-spacing: .1em; margin: 10px 12px 0px 13px; padding: 12px 0px 0px 0px; font-size: 14px; } #navcontainer ul li.NotActive1 a:hover { text-align: center; background-image:url(Images/BigBlueButton.jpg); background-repeat:no-repeat; background-position:top; text-decoration: none; /*letter-spacing: .1em;*/ width: 104px; height: 70px; margin: 0px 0px 30px 0px; font-size: 20px; float: left; } #navcontainer ul li.NotActive2 a:hover { text-align: center; background-image:url(Images/BigBlueButton.jpg); background-repeat:no-repeat; background-position:top; text-decoration: none; /*letter-spacing: .1em;*/ width: 104px; height: 70px; margin: 0px 0px 13px 0px; padding: 8px 0px 0px 0px; font-size: 20px; float: left; } #navcontainer ul li.OneLine a{ padding: 18px 0px 0px 0px; } #navcontainer ul li.TwoLine a{ padding: 12px 0px 0px 0px; letter-spacing: .11em; } #navcontainer ul li.OneLine a:hover { padding: 20px 0px 0px 0px; } #navcontainer ul li.TwoLine a:hover { padding: 10px 0px 0px 0px; } I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Hi all, ive got a problem that only seems to be happening in google chrome, if you look at http://roksportsurf.co.uk/acatalog/Mens_Billabong_Tee_Shirts.html the red circles with the price in are out of position on first load, but if I refresh the page they are in the correct position. Ive tried IE and Firefox and they display fine there, even safari works ok. any ideas what could be causing it? |