CSS - Strange Extra Padding On Opera
Hi all,
Wierd problem with Opera. The site's working fine on IE and Firefox: http://3003online.com/demos/piplk/ On Opera, it looks almost the same, except the "bottom links" is pushed WAY down, leaving a lot of white space inbetween it and the upper content (i.e. thats a <div id="bottom_links"> which shows the small links you see at the bottom) If you view the source - there's a "right area" which shows you those four logos at the right of the text content: Code: <div id="right_area"> </div> (CSS) #right_area { width: 109px; float: right; background: blue; height: 260px; margin-top: 140px; background: url(../images/0_sidelogos.gif) no-repeat; } I noticed, when I remove the "height" and "margin-top" properties from the above style, then Opera shows the site correctly - i.e. without that big gap. However, removing the height means I lose the logos... I need that height to show the image 0_sidelogos.gif Any suggestions? One suggestion would be to remove the background 0_sidelogos and insert an <img> tag of that image within the #right_area. Then I wouldn't need to specify height and Opera should display it fine. However I'd ideally leave it as a background - so any advice to the above would be greatly appreciated. Many thanks!! Similar TutorialsI have been testing with Opera, Mozilla & IE. I am using STRICT DTD, and I checked my CSS with w3.org validation checker, so I would think that Opera and Mozilla would be compliant, but they are the ones giving me problems. I have table cells that only have images in them and they have extra padding, or margins at the bottom. WHY?! I have removed all the padding and margins from everything in the rows and added then removed the heights of the cells - neither worked. I have checked my code more times than I can count - and it is right. WHY IS MOZILLA AND OPERA ADDING EXTRA SPACE AT THE BOTTOM OF THE CELL?!?!?!?!?!? I'm having some troubles getting my div to appear correctly. WHat I want is for the div to be completely contained by a FLASH movie with no whitespace. In Firefox I'm getting an approximately 5px tall white bar at the top. TWH is the url, the flash movie only appears on the main page. My container div uses a background image with a greenish colored 200px left edge, and then a white edge to fill the rest. I know this is what's coming through, but what baffles me is that even when specifying a background color for my div it's not coming through. Here is some of the code: CSS: Code: #container { width: 760px; height: auto; margin: 0 auto; text-align: center; overflow: auto; background: url('../images/style/container_back.jpg') repeat-y; border-bottom: 20px solid #6e868f; } #lcol { width: 200px; height: 380px; float: left; text-align: left; } #nav { height: auto; background-color: #000000; width: 100%; text-align: center; } #nav ul { list-style: none; padding: 20px 0px; margin: 0px; } #nav ul li { padding: 7px; } #info { height: auto; width: 190px; text-align: center; padding: 5px; font-size: 11px; } #flashcontent { width: 560px; height: 380px; padding: 0; margin: 0; float: right; } HTML -- I've taken the content out so that the structure is more clear. Code: <div id="container"> <div id="header"> <div id="logo"></div> <div id="quote"></div> </div> <div id="lcol"> <div id="nav"></div> <div id="info"></div> </div><!--lcol--> <div id="flashcontent"> FLASH player is required to view portions of this site.<br /><br /> <a href="http://www.macromedia.com/go/getflashplayer" target="_blank"> <img src="images/logos/get_flash_player.gif" alt="FLASH player" height="31" width="88" /></a> </div> <script type="text/javascript"> var so = new SWFObject("slideshow.swf", "gallery", "560", "380", "6", "#6e868f"); so.write("flashcontent"); </script> </div><!-- end container --><br /> Hey everyone, I am working on an old design I started a while back, and for some reason, IE and Opera do not render the top padding right. I figured that it is a bug, but I am not sure. Here is my code: css Code: Original - css Code body { background-image: url( http://img521.imageshack.us/img521/6097/blissxk5.png ); color: #000000; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: center; padding: 0; margin: 0; } a img { border: 0; } a,a:link,a:visited,a:hover,a:active { color: #0099FF; text-decoration: underline; } a:hover { color: #FF9900; text-decoration: underline; } #container { width: 85%; margin: 0 auto; text-align: left; } #header { padding-left: 150px; } #menu { width: 100%; text-align: center; } #menu ul { list-style-type: none; display: block; } #menu li { display: inline; } #menu a { padding-left: 45px; padding-right: 45px; padding-top: 15px; padding-bottom: 15px; } #menu a:hover { opacity: .8 !important; background-color: #999999; color: #FFFFFF; } #main { opacity: .6 !important; filter: alpha(opacity=50); background-color: #FFFFFF; padding: 1%; text-align: justify; } #main h1 { color: #0075FF; border-bottom: 2px solid #0099FF; display: block; width: 60%; } #footer { text-align: center; } #footer a { color: #000000; } body { And also IE6+ do not seem to render the filter property. Anyone know whats going on with this? looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking? Code: .topa { width: 1000px; padding: 5px; background:#000000 } edit: nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way. This might be a newbie question. There is a extra space on the top of the side bar in IE and not in FireFox Probably a browser style issue, however I do not know what to over-write. Example is at the following. holzgreen.com/padding/ Thanks for looking. Hi, i'm almost finished with my first css design. Everything works fine as far as i tested it. But when i refresh the graphical page (broadband) or click on the broadband link when i'm on the broadband page i get a white block on the left and right side of the page. It is very strange because it disappears when you scroll down and back up. Sometimes i have to refresh a couple of times, or switch between small- and broadband to see the effect. Code: http://users.pandora.be/jef_patat/test/index.htm I have no clue at all greetings, de Jef I am setting up a site that has an inner white content area surrounded by an outer grey area. Both areas have rounded corners. I use a bg image (single image for both corners) with a no repeat to handle the corners on the top. I want the same amount of padding all the way around the white box. So I have a div with the white content area inside the div for the grey box and gave the grey box a padding of 7px. This displays fine in IE (oddly enough), but doesn't display correctly in Firefox or Safari. What it is doing in those 2 browsers is adding extra space on the top and the bottom, so the grey area is about 12px taller than it should on either side. Where is this extra space coming from? How can I fix this? I have attached an image showing the issue and the code used is below. So here's the css: Code: body{ padding:0px; margin:0px; background:#535353; } .nav_container{ width:770px; height:76px; background-color:#FFF; } .page_body{ background:url(images/page_top_curve.gif) top left no-repeat #e1e1e1; width:756px; padding:7px; } .content_container{ background:url(images/content_full_top_curve.gif) top left no-repeat #fff; width:756px; } and here's 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=ISO-8859-1" /> <title>Title</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--MAIN NAVIGATION--> <div class="nav_container">hgjgjhg </div> <!--PAGE BODY--> <div class="page_body"> <div class="content_container"> <p>dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd</p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html> Hi there, someone please help me... i am pulling my hair out! hahah so i am trying to custom code an email template for use in mailchimp - however it looks okay in design preview in dreamweaver but when i preview in firefox or take it into mailchimp there are extra spaces above and below the images not specified in the code. Please help../. urgent job! [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "...."> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sample Email Template From MailChimp</title> <style type="text/css" media="screen"> /** * @tab Page * @section background color * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding. * @theme page */ body { /*@editable*/ background-color: #ffe4a8; text-align:center; } /** * @tab Page * @section border * @tip Add a border to help your template content stand out from your email's background. */ #layout { /*@editable*/ border: 0px solid #999999; /*@editable*/ background:#ffffff; text-align:left; height: auto; width: 780px; } /** * @tab Header * @section header bar * @tip Choose a set of colors that look good with the colors of your logo image or text header. */ #header { /*@editable*/ background-color: #FFE4A8; /*@editable*/ border-top: 0px none #333333; /*@editable*/ border-bottom: 0px none #ffffff; /*@editable*/ padding: 0px; /*@editable*/ color: #333333; /*@editable*/ font-size: 30px; /*@editable*/ font-family: Georgia; /*@editable*/ font-weight: normal; /*@editable*/ text-align: left; margin: 0px; height: 156px; width: 780px; } /** * @tab Body * @section default text * @tip This is the default text style for the body of your email. * @theme content */ #content { /*@editable*/ font-size: 13px; /*@editable*/ color: #333333; /*@editable*/ font-style: normal; /*@editable*/ font-weight: normal; /*@editable*/ font-family: Helvetica; /*@editable*/ line-height: 1.25em; text-align: justify; padding-right: 30px; padding-bottom: 10px; padding-left: 30px; } /** * @tab Body * @section title style * @tip Titles and headlines in your message body. Make them big and easy to read. * @theme title */ .primary-heading { /*@editable*/ font-size: 28px; /*@editable*/ font-weight: bold; /*@editable*/ color: #532e2a; /*@editable*/ font-family: Georgia; /*@editable*/ line-height: 150%; /*@editable*/ margin: 25px 0 0 0; } /** * @tab Body * @section subtitle style * @tip This is the byline text that appears immediately underneath your titles/headlines. * @theme subtitle */ .secondary-heading { /*@editable*/ font-size: 20px; /*@editable*/ font-weight: bold; /*@editable*/ color: #000000; /*@editable*/ font-style: normal; /*@editable*/ font-family: Georgia; /*@editable*/ margin: 25px 0 5px 0; text-align: justify; } /** * @tab Footer * @section footer * @tip You might give your footer a light background color and separate it with a top border * @theme footer */ #footer { /*@editable*/ background-color: #FFE4A8; /*@editable*/ border-top: 0px none #ffffff; /*@editable*/ padding: 0px; /*@editable*/ font-size: 10px; /*@editable*/ color: #333333; /*@editable*/ line-height: 100%; /*@editable*/ font-family: Verdana; } /** * @tab Footer * @section link style * @tip Specify a color for your footer hyperlinks. * @theme link_footer */ #footer a { /*@editable*/ text-decoration: underline; /*@editable*/ font-weight: normal; } /** * @tab Page * @section link style * @tip Specify a color for all the hyperlinks in your email. * @theme link */ a, a:link, a:visited { /*@editable*/ color: #800000; /*@editable*/ text-decoration: underline; /*@editable*/ font-weight: normal; } a:link { color: #EE770F; } a:visited { color: #C91C00; } a:active { color: #EE770F; } </style> </head> <body> <center> <table id="layout"mc:edit="layout" border="0" cellspacing="0" cellpadding="0" width="780"> <tr> <td id="header" mc:edit="header" width="780" height="156"> <!-- NOTE: This image would trigger the display of a placeholder block with edit links when shown in the MailChimp editor interface --> <img src="...." alt="" width="780" height="129" /> <img src="...." alt="" width="524" height="27" /><img src="...." alt="" width="86" height="27" /><img src="...." alt="" width="101" height="27" /><img src="...." alt="" width="69" height="27" /> </td> </tr> <tr> <td id="content" mc:edit="content"> <h1 class="primary-heading">Primary Heading</h1> <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p> <h2 class="secondary-heading">Secondary Heading</h2> <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br /> </p> </td> </tr> <tr> <td id="footer" mc:edit="footer"> <p align="center"> <img src="...." alt="" width="780" height="28" /> <a href="*|ARCHIVE|*" class="adminText"><br /> <br /> view email in browser</a> | <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend </a></p> <p align="center">Copyright (C) 2009 *|LIST:COMPANY|* All rights reserved.<br /> </p> </td> </tr> </table></center> </body> </html> [CODE] conception is offline Reply With Quote Hello, Interesting problem... I have a span tag with a small font in it. When I don't specify a doctype, there is no red "padding" for lack of a better word. When I specify a strict xhtml doctype, I do get "red padding". I tried setting the padding to zero, but it didn't help. How can I get rid of the "red padding"? 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" xml:lang="en" dir="ltr" lang="en"> <table cellspacing="0" cellpadding="0"> <tr> <td style="background: red; padding: 0px;"> <span style="font-size: 50%; background: blue; padding: 0px;"> How can I get rid of the red space? </span> </td> </tr> </table> Thanks! Hi all, My first post here as I am struggling a bit with some CSS and i'm not sure where I am going wrong. My brother built a site based on a template, but he needed some help with maintenance and both the html and css code was complete crap. So I have started rebuilding the site from scratch to make it easier to maintain, and am copying a few bits and peices across from the old site to speed up the process. One such peice was the nav menu. As it stands the menu displays properly and the rollovers work etc, however it has some sort of mystery padding to the left hand side that I can't shift. Please can you take a look at the files and let me know where i'm going wrong? www [dot] dubtrippin [dot] com/test.html Cheers, Paul. Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code: <style> #menubox { float:left; margin-left:15px; margin-bottom:7px; } .main_cell { padding:15px; } </style> <body> <table width=600 border=0 cellpadding=0 cellspacing=0> <tr> <td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div> Some text that wraps around "menubox" but needs to be padded around cell walls.</td> </tr> </table> </body> Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? http://josephman1988.tripod.com/ Test page. In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE. Why? And how can i fix this? Thanks for the help. Joe. http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html><head><title>The Shalom Foundation</title> <style type="text/css"> <!-- body { text-align:center; background-color:#666666; margin:0 0 50px 0; /* top right bottom left */ } p{ padding:0; margin:0; text-align:justify; } #mainBox { float:right; margin:9px 12px 0 0; padding:0px; width:733px; text-align:left; background-color:#999999; } #pageHeader{ background: url(images/layout/header.jpg) no-repeat top left; padding:0; margin:0; text-indent: -15000px; height: 290px; overflow: hidden; } #nav{ position:absolute; right:100px; margin:0; background: url(images/layout/menu.jpg) no-repeat top left; padding:0; margin:0; width:136px; height: 302px; overflow: hidden; } --> </style> </head> <body> <div id="mainBox"> <div id="pageHeader">The Shalom Foundation</div> <div id="nav">Nav</div> <div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div> <div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt? aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te, domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris tui.</p></div> <div id="rightNav">rightNav</div> <div id="pageFooter">pageFooter</div> </div> </body> </html> Thanks in advanced for any help! I keep forgetting to write these little fixes down, but this is a good time to start. As usual I've come to a crossroad I cannot seem to get passed. In IE6 my layout looks fine, all but a little extra space at the top of my center div in a three column layout. Ive tried all variations of padding: 0px and margin: 0px in both the center div and its containing div. If someone could kindly point the error to me, I promise to write it down this time .. and never ask again ;0) Site: http://www.ioforge.com/development/ CSS: http://www.ioforge.com/development/includes/style.css At this URL (http://digitalspline.com/projects/gameCitadel/) You will see the lower content area in IE looks like it is right aligned, in firefox it is exactly where I want it. There is a left margin set on the two first blocks, upper left and upper right of 30pt. Code: body { background-color: #a0a0a0; background-image: url(images/index/pageBackground.gif); background-position: top; background-repeat: repeat-x; margin-top: 17px; color: #FFFFFF; } a:hover { color: #FFFF00; } #wrapper { background-color: #323333; color: #FFFFFF; width: 779px; } #topHeader { background-color: #323333; background-image: url(images/index/headerBG.gif); color: #FFFFFF; width: 779px; height: 88px; text-align: right; vertical-align: middle; font: 8pt Verdana, Arial, Helvetica, sans-serif; } #login { text-align: right; color: #FFFFFF; font-weight: bold; padding-top: 10px; padding-right: 10px; } .loginBox { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #000000; background-color: #FFFFEE; width: 100px; border: 1px solid #000000; } #mainContent { background-color: #323333; background-image: url(images/index/contentBG.gif); width: 779px; height: 700px; overflow: auto; margin-top: 7px; } #leftMenuTop { background-color: #323333; background-image: url(images/index/menuTop.gif); background-repeat: no-repeat; background-position: right; width: 148px; height: 179px; float: left; padding-left: 13px; } #leftMenuTopText { width: 122px; height: 148px; float: right; margin-top: 15px; font: 9px Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } .menuText{ padding-top: 4px; } .menuLinkText{ color: #702706; text-decoration: none; } #leftMenuBot { background-color: #323333; background-image: url(images/index/menuBot.gif); background-repeat: no-repeat; background-position: right; width: 148px; height: 389px; float: left; padding-left: 13px; margin-top: -80px; } #bannerBoxTop { background-color: #323333; background-image: url(images/index/bannerBG.gif); background-repeat:no-repeat; width: 492px; height: 69px; float: left; margin-left: 62px; } #bannerTop { background-color: transparent; width: 468px; height: 60px; float: right; margin-top: 4px; padding-right: 13px; } #featuredArt { background-color: #000000; width: 571px; height: 179px; float: left; margin-left: 22px; margin-top: 20px; } #featureBoxTop { background-image: url(images/index/featureBoxTop.gif); background-repeat:no-repeat; height: 15px; font: 9px Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; text-indent: 7px; padding-top: 2px; } #featureContent{ height: 148px; } #featureBoxBot { background-image: url(images/index/featureBoxBot.gif); background-repeat:no-repeat; height: 15px; font: 9px Verdana, Arial, Helvetica, sans-serif } #newestBlock{ width: 571px; height: 400px; float: left; margin-top: 7px; margin-left: 22px; } #box1 { width: 150px; background-color: #000000; float: left; margin-top: 13px; margin-left: 30pt; } #box2 { width: 150px; background-color: #000000; float: left; margin-top: 13px; margin-left: 15pt; } #box3 { width: 150px; background-color: #000000; float: left; margin-top: 13px; margin-left: 15pt; } #box4 { width: 150px; background-color: #000000; float: left; margin-top: 15px; margin-left: 30pt; } #box5 { width: 150px; background-color: #000000; float: left; margin-top: 15px; margin-left: 15pt; } #box6 { height: 180px; width: 150px; background-color: #000000; float: left; margin-top: 15px; margin-left: 15pt; } .head150 { background-image: url(images/index/150header.gif); background-repeat: no-repeat; font: 9px Verdana, Arial, Helvetica, sans-serif; font-weight: bold; height: 16; text-align: left; line-height: 16px; text-indent: 5px; } .foot150 { background-image: url(images/index/150footer.gif); background-repeat: no-repeat; font: 9px Verdana, Arial, Helvetica, sans-serif; height: 15px; } .mid150 { font: 9px Verdana, Arial, Helvetica, sans-serif; height: 149px; text-align: left; } #footer { background-color: #323333; background-image: url(images/index/footer.gif); background-repeat: no-repeat; width: 779px; height: 99px; } Hi guys, I'm pretty new to CSS. I had this style sheet set up, and it was working in Firefox just fine. When I tested it on IE, the center logo instead of being approximately 15 pixels down from the top, it's right at the top. I was able to get those 15 pixels to appear in IE with 2 changes, but now there is an extra 15 pixels in Firefox, so it is down approx. 30 pixels. Can anybody see what I'm doing wrong, or provide a hack that will fix it? css Code: Original - css Code /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ body { margin:0px; margin-bottom:50px; padding:0px; text-align:center; background-image:url(../images/bg-grn2.gif); } a:link {color:#0000EF;} a:active {color:#EF0000;} a:visited {color:#52188C;} div#FS-Logo { position:absolute; top:10px; left:10px; height:110px; width:100px; background:url(../images/left-logo.gif) top left no-repeat; margin:10px; padding:0; } div#FWS-Logo { position:absolute; top:10px; right:10px; height:110px; width:100px; background:url(../images/right-logo.gif) top right no-repeat; margin:10px; padding:0; } div#Header { width:300px; height:140px; /*change this to 155px*/ margin:0px auto; text-align:center; font-family:"Trebuchet MS", serif; background:url(../images/center-logo.gif) no-repeat top center;/*change this to 'no-repeat center center'*/ } div#Main-content { width:55%; height:500px; margin:0px auto; text-align:left; padding:0px; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Left-column { position:absolute; top:155px; left:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Right-column { position:absolute; top:155px; right:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Footer { position:static; bottom:10px; right:15px; width:100%; margin:0; padding:0; text-align:center; font-family:verdana, sans serif; font-size:14px; } .hd-header {color:#8A4B2C;} .hd-footer {color:#000000;} .hd-main {color:#FFFFFF;} /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ My html page is this. html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p> </p> </div> <div id="Header"> <p> </p> </div> <div id="FWS-Logo"> <p> </p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html> I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me. If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well. Here's a link to the file: http://www.websimage.com/3238/index2.html I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated. EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to. Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this. |