CSS - Opera Overflow Support
Just curious if anyone has any resources that explain what type of overflow attributes Opera supports.
I'm working on a site right now and see that in Opera "overflow: auto" is not supported. Is there a known work around? I am using Opera 9.25 Thanks! Similar TutorialsMy CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } I have created a simple css and I notice that when the html page is opened by IE and NN my text-decoration: none seems to have no effect on the links. When I use Opera it works well. Is it my code or do you have to do something else as the text I'm working from says > and + support is not uniform? div.navbar { font-family: Arial, Helvetica, sans-serif; white-space: nowrap; } div.navbar > span.self { font-weight: bold; color: #c80; padding: 3px; } div.navbar > a:link { padding: 3px; color: #300; text-decoration: none; } div.navbar > a:hover { background-color: #eb0; color: #200; padding: 3px; text-decoration: none } Just a small ramble... About 2 or 3 weeks ago I finally installed IE 7 Beta 2 to give it a test drive to see how MS was coming along in their CSS support... Before I go any further, let it be known: I ALWAYS develop in Firefox and correct for IE ... Anywhoo, I was in the middle of this large project for my client and much to my surprise, MS has come a very loooong way in supporting CSS; so much so I couldn't tell ANY difference between Firefox 1.5 and IE7...seriously. I know MS still hasn't given into standards 100% with IE7 and IE7 is still along way off of having the marketshare IE6 has right now, but I was soooo thrilled I just wanted to drop everyone a line here and share my joy! IE7 Beta 2 Download Link I viewed several examples of use of CSS filters like blur wave mask etc with various browsers but none reflected the changes, how come ? just look at my site in firefox, then IE, if you have it. horrible. how do i correct everything? firstly, the main div columns which are floated left end up like normal non-floating divs, so they are stacked vertically. Code: <div id='leftcolumnmenusouter'><!-- left column menus --> <div id='leftcolumnmenus'> <?php include "columnmenus.php"; ?> </div> </div> <div id='maincontentcolumnouter'><!-- middle column --> <div id='maincontentcolumn'> <?php if (is("home")) { include "home.php"; } else if (is("register")) { include "register.php"; } else if (is("login")) { include "login.php"; } else if (is("comment")) { include "comment.php"; } else if (is("profile")) { include "profile.php"; } else if (is("category")) { include "category.php"; } else if (is("game")) { include "game.php"; } else if (is("links")) { include "links.php"; } else if (is("rules")) { include "rules.php"; } else if (is("faq")) { include "faq.php"; } else if (is("pp")) { include "pp.php"; } else if (is("links")) { include "links.php"; } else if (is("page")) { include "page.php"; } else if (is("news")) { include "news.php"; } else if (is("users")) { include "users.php"; } else if (is("search")) { include "search.php"; } else if (is("taf")) { include "taf.php"; } /*else if (is("submit")) { include "submit.php"; } */else if (is("pm")) { include "pm.php"; } else if (is("play")) { include "play.php"; } else if (is("request")) { include "request.php"; } else if (is("contact")) { include "contact.php"; } else { include "error.php"; } ?> </div> </div> CSS: Code: #maincontentcolumnouter { width:75%; margin:0px; float:left; } #maincontentcolumn { margin-top:8px; margin-bottom:0px; margin-left:4px; margin-right:8px; } #maincontentcolumn .ocontentsection { margin-bottom:8px; } #maincontentcolumn h2 { text-indent:1em; } #leftcolumnmenusouter { width:25%; margin:0px; float:left; } #leftcolumnmenusouter #leftcolumnmenus { margin-top:8px; margin-bottom:0px; margin-left:8px; margin-right:4px; } #leftcolumnmenus .ocontentsection{ margin-bottom:8px; } #leftcolumnmenus h2{ text-align:center; } #footer { margin:0px; padding:0px; clear:both; } HI; Does the hover not support for the IE browser ? I am using a hover for buttons in IE browser, it does not has any reaction when the cursor is held over the buttons, but it does work in the Firefox, Netscape, and Opera browser. Could any one tell me why ? Thanks. My code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css" > body { font: 80% arial, helvetica, sans-serif; background: white; margin:0; } #container{ position: relative; width: 780px; w\idth: 780px; border: solid #036; border-width: 0 3px; margin: auto; } table { position: absolute; width: 700px; margin: auto; } table td { background: url(mybutton1.jpg); background-repeat: no-repeat; background-position: center; width: 150px; height: 50px; text-align: center; font-size: 20px; color: white; } table td:hover { background: url(mybutton2.jpg); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="container"> <table> <tr> <td> Home </td> <td> About Us </td> <td> Contact Us </td> <td> Help </td> </tr> </table> </div> </body> </html> Please look at this URL http://www.finance.samif.com/Koelkast When I select any check box on left column then one pop up is display on screen. This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox. Vertically and Horizontal But when I used IE and select check box on bottom left menu then I can't see pop up image. Because this is not display vertically middle or it is not fixed. Please give me idea or suggestion how I can fix it. Thanks I am working on a header for a site and am having trouble with cross-browser support for one element. I have kept all of the CSS in the html page for testing purposes. The problem I'm having is that in FF and IE6, I am having difficulty getting the #menuBar, .filmstripTop, #menuChoices, and .filmstripBottom elements to align on top of each other, despite margins, padding, etc. set to 0. (I have set the background of #menuBar to yellow so you can see what I think is the offending element.) In FF and IE6, I see the yellow running across the screen but in different places. In IE running under Windows Vista, everything appears aligned as intended. (The menu text is just a placeholder for the navbar I will do once the other formatting is fixed.) I'm sure this must be an easy fix and something I've overlooked, but I have been at this for hours and can't seem to figure out how to make this work. Suggestions? Thanks! url: http://www.bonvoyageimagery.com Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> body { border: 0 0 0 0; margin: 0 0 0 0; background: #000; color: #FFF; } #header { background: url(images/LogoBackgroundGradient.jpg) repeat-x; text-align: center; margin: 10px 0 0 0; padding: 0 0 0 0; } .imgBorderHeader { border: 2px solid #888; } #menuBar { clear: both; border: 0 0 0 0; padding: 0 0 0 0; margin: -4px 0 0 0; background: yellow; } .filmstripTop { border: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; height: 12px; width: 100%; clear: both; background: url(images/FilmstripTop-8x12.jpg) repeat-x; } .filmstripBottom { border: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; height: 12px; width: 100%; clear: both; background: url(images/FilmstripBottom-8x12.jpg) repeat-x; } #menuChoices { width: 100%; clear: both; border: 0 0 0 0; margin: 0 0 0 0; padding: 0 0 0 0; text-align: center; background: #362217; color: white; } #menuChoices p { font-size: .75em; font-family: Arial; vertical-align: middle; } </style> </head> <body> <div id="header"> <img border="0" src="images/Logo2.jpg" style="padding-right: 70px;" width="280" height="125"> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035223&Size=Th" width="100" height="100" hspace="10" align="top" style="margin-top: 10px; margin-bottom: 10px" /> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035171&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" /> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=1035174&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" /> <img class="imgBorderHeader" src="http://armchair-traveler.smugmug.com/photos/random.mg?AlbumID=2645154&Size=Th" width="100" height="100" hspace="10" style="margin-top: 10px; margin-bottom: 10px" align="top" /> </div> <div id="menuBar"> <div class="filmstripTop"></div> <div id="menuChoices"> <p>Home Destinations Themes Specialty Calendars Browsing and Ordering Customer Care</p> </div> <div class="filmstripBottom"></div> </div> </body> </html> I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px. I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length. I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround. However, if there are other browsers that don't support max- and min-width, I'll run into some problems. If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it. I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties. Thanks in advance for any comments! This is frusteratung me so much... yet again I'm back because IE does not respond properly. Here is the page: tri-m.com/index_jan_newFproduct.html Please don't tell me I should validate first because I know validating is not the problem here and I will be validating after I fix this. The problem is in the Join the Mailing List section. The image behind the form field moves when you restore down from being maximized and you resize the page up and down. In IE the image moves but in FF the image is static. The solution is probally quite simple but I'm so flustered right now that I'm not able to come up with the solution. If someone could help me that would be wonderful and greatly apperciated. - Jacenta I've got the layout I want working in IE. I'd like to know how to make it work in all browsers. Mozilla seems to ignore the overflow setting for the docBody class. I'll happily ditch the table if someone can tell me a better way to achieve the result I want. Here's the code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> body { margin: 0; padding: 0; background: yellow; overflow: hidden; } div { margin: 0; padding: 0; } .pageContainer { width: 100%; height: 100%; border-collapse: collapse; margin: 0; padding: 0; } .header { height: 100px; background: orange; } .docBody { height: 100%; width: 100%; overflow: auto; background: black; } .docBodyColumns { margin: 0; padding: 0; width: 100%; border-collapse: collapse; } .col1 { width: 33%; background: green; padding: 10px; } .col2 { width: 34%; background: red; padding: 10px; } .col3 { width: 33%; background: blue; padding: 10px; } .footer { height: 60px; background: aqua; } </style> </HEAD> <BODY> <table class='pageContainer'> <tr> <td class='header' valign='top'>Header</td> </tr> <tr> <td> <div class='docBody'> <table class='docBodyColumns'> <tr> <td class='col1' valign='top'> Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 </td> <td class='col2' valign='top'> Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 </td> <td class='col3' valign='top'> Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 Column 3 </td> </tr> </table> </div> </td> </tr> <tr> <td class='footer' valign='top'>Footer</td> </tr> </table> </BODY> </HTML> Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S 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! My page looks decent in Firefox but in IE the overflow property doesn't seem to be working. Perhaps you can give me some pointers as to which tags may be messing up the display in Internet Explorer. The link to the page in question. http://www.paulvincentgandolfi.com/blog/?page_id=123 Thanks this is the code i'm having problems with: Code: <style type="text/css"> body { font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#666; margin : 0; padding : 0; } /* text */ h1 { font: bold 10px Verdana, Arial, Helvetica, sans-serif; line-height:30px; } /* div classes */ div.row { position:relative; left:10px; width:326px; height:20px; z-index:1; margin-bottom:8px; text-align:right; } div.cell_title, div.cell_content { position:absolute; top:0px; float:left; padding:0px 0px 0px 8px; border:1px solid #E4E4E4; text-align:left; line-height:17px; } div.cell_title { background-color: #E4E4E4; left:0px; width:100px; z-index:2; } div.cell_content { background-color:#FCFCFC; left:100px; width:224px; z-index:3; } /* form elements */ .input { font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#666; background-color: #FCFCFC; height:15px; width:213px; border:0; } .textarea { font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#666; background-color: #FCFCFC; height:100px; width:213px; border:0; overflow:auto; } </style> <h1>Contact</h1> <form action="?menu=contact" method="post" name="contact"> <div class="row"> <div class="cell_title"><label for="name">name:</label></div> <div class="cell_content"><input type="text" class="input" name="name" id="name"/></div> </div> <div class="row"> <div class="cell_title"><label for="email">email:</label></div> <div class="cell_content"><input type="text" class="input" name="email" id="email" /></div> </div> <div class="row"> <div class="cell_title"><label for="message">message:</label></div> <div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div> </div> <div class="row"> <input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit"> </div> </form> My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!). I hope that you understood my problem and could help my with it. Thanks in advance! While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code: body, td, iframe, table, div, tr { font-variant: small-caps; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; background-color: #666666; scrollbar-3dlight-color: #666666; scrollbar-arrow-color: #666666; scrollbar-base-color: #666666; scrollbar-darkshadow-color: #666666; scrollbar-face-color: #666666; scrollbar-highlight-color: #666666; scrollbar-shadow-color: #666666; } a:link { color: #ffffff; text-decoration: none; } a:visited { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #ff0000; } a:active { text-decoration: none; color: #ffffff; } select, option, textarea, input { border: #ffffff 1px solid; font-size: 11px; font-variation: normal; font-family: Verdana; background-color: #666666; } I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers? |