CSS - Padding And Opera..........
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. Similar TutorialsHey 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? 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!! 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? For some reason, this PHP Code: input.headtext {background-color: #515153;border: 0px outset #515153;} leaves a bright yellow hideous border around the input field. Is there any way to get rid of that? This works fine in IE and Netscape, but Opera 7.x makes it look like ****. hey, I have problems with getting CSS to display properly in Opera. http://www.hostultra.com/~lunaxy/home.php this host SHOULD be working. Anyway, the problem is with the side navigation menu. In Opera, theres gaps between the top and left bits (I used these to create the curved box effect). How do I get rid of this? 2nd problem. How do I move the top right navigation to the far right side. I can't float it without making it look bad in Opera (but IE and mozilla are fine). I want the stuff in the yellow box to be at the right side. thanx ppl! I have created a navbar to be absolutely positioned in the header; works fine in FFox and IE/Win. Works in Safari as well. But Opera 7/Win and IE 5/Mac don't treated the positioning correctly. I've got the XHTML to validate. Don't know what's up. Take a look: http://dev3.witechcolleges.org/ Thanks. Hi, Av just check my website in Opera for the mac and found something annoying.. I have problems with my header and footer.. Screenshots: http://i45.photobucket.com/albums/f56/phi21/Picture1-6.png Header cut off http://i45.photobucket.com/albums/f56/phi21/Picture2-3.png massive footer Works fine in everything else.. what could be happening ? Thanks www.leehughes.co.uk Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code: <div id="content_container"> <div id="belowbg"> <div id="left"> <div id="h3lft"> <h3>Welcome</h3> </div> <div id="contentlft"> <p>Lorem ipsum ...</p> </div> <div id="footlft"></div> </div> <div id="right"> <div id="h3rght"> <h3>Latest</h3> </div> <div id="contentrght"> <p>Lorem ipsum ...</p> </div> <div id="footrght"></div> </div> </div> <div id="footer"> <p>text</p> </div> </div> The relevant CSS is as follows: Code: #content_container { position: absolute; top: 406px; left: 50%; margin: 0 0 0 -372px; width: 742px; height: auto; z-index: 10; } #belowbg { padding: 0 11px 11px 11px; width: 720px; height: auto; background-color: #313131; } /*hack to ensure that Mozilla encloses the floats with the #belowbg div*/ #belowbg:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #left { float: left; width: 481px; height: auto; padding: 0; margin: -25px 0 0 0; } #h3lft { width: 481px; height: 25px; background: url(images/welcomehd.gif) no-repeat; text-indent: -9000px; display: block; position: relative; margin: 0; padding: 0; } #contentlft { width: 459px; height: auto; background-color: #293942; border: 1px solid #636B73; margin: -1px 0 0 0; padding: 10px 10px 0 10px; font-size: 1.2em; line-height: 1.6; display: block; } #footlft { width: 481px; height: 20px; margin: -1px 0 0 0; background: url(images/welcomeft.gif) no-repeat; display: block; } #right { float: right; width: 230px; height: auto; padding: 0; margin: -25px 0 0 0; } #h3rght { width: 230px; height: 25px; background: url(images/latesthd.gif) no-repeat; text-indent: -9000px; display: block; position: relative; margin: 0; padding: 0; } #contentrght { width: 208px; height: auto; background-color: #525252; border: 1px solid #636B73; margin: -1px 0 0 0; padding: 10px 10px 0 10px; font-size: 1.2em; line-height: 1.6; display: block; } #footrght { width: 230px; height: 20px; margin: -1px 0 0 0; background: url(images/latestft.gif) no-repeat; display: block; } #footer { position: relative; top: 0; left: 0; width: 720px; height: 188px; padding: 20px 10px; margin: 0; background: url(images/btmhatlines.gif) right no-repeat; font-size: 1.1em; line-height: 1.6; text-align: center; } Can anyone see my mistake? Cheers Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; } html, body { height:100%; } Code: /* center all content */ .center { width:950px; margin:0 auto; } /* keep all content except footer */ #wrapper, #wrapper-error { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -82px; } #wrapper-error { margin-bottom: 0px; } .footer { width:100%; height: 82px; position:relative; background-image: url('../images/bgfooter.jpg'); background-repeat: repeat-x; -moz-box-shadow: 0px -13px 130px 20px #808080; -webkit-box-shadow: 0px -13px 130px 20px #808080; box-shadow: 0px -13px 130px 20px #808080; } .push { width:100%; height: 82px; position:relative; } Thank you! Hey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern. The stylesheet is as follows Code: html, body, h1, h2, h3, h4, ul, li { margin: 0; padding: 0; } h1 img { display: block; } img { border: 0px none; } a { color: #464544; } a:hover { color: #FFA405; } .left { float: left; } .right { float: right; } .clear { clear: both; } body { background: #ECF4F7; text-align: center; font: 11px verdana, arial, sans-serif; color: #695F4C; padding-bottom: 10px; } /** layout **/ #wrapper { text-align: left; margin: 37px auto; width: 839px; background: #ffffff; position: relative; padding: 0; } #header { background: #D9D1BC url('images/logo.jpg') no-repeat; height: 192px } #nav { background: #4B5360; position: absolute; top: 153px; left: 339px; width: 499px; height: 20px; padding: 9px 0px; text-align: center; margin: 0; } #nav li { list-style: none; display: inline; color: #fff; } #nav a { text-decoration: none; color: #fff; } #body { background-color:#FFF; } #postheadb { font: 10px verdana, arial, sans-serif; font-weight: bold; color: #FFFAF0; float: right; width: 500px; background: #2dbaa7; } #postheadb .inner { padding: 6px 12px; width/**/:/**/ 501px; Height/**/:/**/ 10px; } #postheadab p { margin: 0.9em 0; } #posthead { font: 10px verdana, arial, sans-serif; font-weight: bold; color: #FFFAF0; float: right; width: 839px; background: #2dbaa7; } #posthead .inner { padding: 6px 12px; } #posthead p { margin: 0.9em 0; } #contentb{ font: 12px verdana, arial, sans-serif; color: #cad10e; float: right; background: #40789d; } #contentb .inner { padding: 6px 12px; width/**/:/**/ 476px; Height/**/:/**/ 52px; } #contentb p { margin: 0.9em 0; } #content{ font: 12px verdana, arial, sans-serif; color: #cad10e; float: right; width: 839px; background: #40789d; } #content .inner { padding: 12px 12px; } #content p { margin: 0.9em 0; } #copyright { text-align: center; background: #030303; font-size: 9px; padding: 2px; width/**/:/**/ 92.8em; Height/**/:/**/ 3em; } input { color: #FFFAF0; background: #40789d; vertical-align: middle; } .email input { position:absolute; left: 40px; top: 20px; color: #781351; width: 225px; background: #fee3ad; } #sidebar { margin-bottom:0; float: left; background: #D3D3D3; padding: 395px 169px; Height/**/:/**/ 70px; } .videobar { position:absolute; left: 20px; top: 200px; height: 600px; width: 300px; float: right; padding: 10px; } .password input { position:absolute; left: 40px; top: 60px; color: #781351; width: 225px; background: #fee3ad; } #login{ font: 10px verdana, arial, sans-serif; font-weight: bold; color: #FFFAF0; float: right; width: 839px; background: #2dbaa7; } #searchTerm{ width: 125px; height: 15px; } #submitsearch{ height: 22px; } #login .inner { padding: 90px 12px; } #login p { margin: 0.9em 0; } .submit input{ position:absolute; left: 40px; top: 90px; width: 55px; height: 22px; padding: 0; } fieldset { border: 1px solid #781351; position: absolute; left: 300px; height: 130px; top: 215px; width: 300px; } legend { background-color: #ffa20c; border: 1px solid #781351; line-height: 1.5em; position: relative; top: -0.75em; } The website displayed in Firefox can be seen here Firefox and Opera here Opera many thanks, Doug hey all, I'm trying to display a <b> as a block and have its height be 100%, unfortunately in opera and safari it doesn't display anything. If i set the height to be 100px it displays it, but it doesn't like percentages. Anyone know why? and how to fix it? thanks, - legit Please have a look here with Opera. As you can see, the background image is pushed to the top and all you can see it's a little part of the image. Here's part of the css code: Code: body { background: #FFF url(img/bg_body.jpg) no-repeat bottom right; } How could I solve it? I can't set a fixed height because in lower res the layout goes bye bye. See how links went up. how to put them in middle Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code: /* CSS Document */ body { background-color:#E1FFDC; text-align:center; margin:0px; } #container { width:675px; height:100%; background-image:url(mainbg2.gif); background-repeat:repeat-y; margin-left:auto; margin-right:auto; text-align:center; } #mainphoto { width:600px; height:278px; margin-left:2px; background-image:url(maintop.jpg); position:relative; } #menubar { width:600px; height:39px; margin-left:1px; position:relative; } mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE. The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots: Internet Explorer and Opera Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug! Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out: my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking! Any help would be greatly appreciated! Sajid Hi, have a weblog, powered by wordpress, styled with css. it looks all right in firefox & IE, but i'm not too happy with the look in opera, as the content has a large blank gap between the first post and the rest of the content. to view my site: http://www.jarra.nl/ CSS: http://www.jarra.nl/css/weblog.css and this is a screenshot: http://www.jarra.nl/_TEST/opera.gif I can't find out what's causing it, and don't have an idea how to solve it, any help is appreciated a lot.. thanx, jarra I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this. 1. Block had some sort of padding or whitespace on the right side for some reason. 2. Search button width is short. Problem in red: URL Site: URL CSS: URL Can someone give me a solution or work around for this problem. P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work. My little attempt to create a totally horizontal layout crashed against that crap Opera. Here's the page, and some piece of code: Code: body { height: 400px; width: 2000px; border-bottom: solid 1px #000; background: #fff url(img/bg_body.jpg) no-repeat top right; margin: 0px; } As you can see, in Opera the background image is not displayed at the top right of the body.. any ideas? I've tried the html width 100% trick but no luck. Hi all, I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE. First: in both the header image is gone Second: in IE the menu images are shown too wide resulting in a messed up menu Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced. I'm still trying to debug it myself but I don't seem to be able to solve them. my blog Any help or ideas are appreciated. Kind regards, Jef |