CSS - Opera Requiring Refresh/scroll For Correct Rendering
Well, the subject says it all. http://www.virtual-business-options...est/index1.html. On a page I'm developing</a>, I have the three column layout. In IE, Net, FF, it appears fine. But Opera 6 (No folks, I still haven't upgraded!!!) loads the background image completely messed up. But, if you scroll down, it appears fine, and if you scroll back up, it appears fine...oh boy! I'm wondering if this possibly has something to do with the Flash embed. The validator is pointing out several problems with the embed element and, since I'm not familiar with Flash, I don't know how to validate it (or even if it can be). Does anyone have any ideas? Thanks.
Tim Similar TutorialsHey everyone, The site in question is roadmasterusa.com We've got a site developed that looks acceptable in most browsers, with the exception of Opera and IE8 (though we were able to put in the modify header to roll back to IE7 rendering). The problem is the positioning of the navigation, and some of the other page elements. Now I have been unsuccessful in finding any way about this other than to not support Opera, but we don't want to miss out on that 1% of visitors. I've spent quite some time trying to figure out how to get this site to render right; now I need some expert help. I look forward to anything you suggest. -Troy Oltmanns http://www.rich-carey.com/rc-alpha/index.php?c=files&content=misc A problem with my CSS means the columns arent equal, any ideas? ive tried several things, and JUST got colour on the right side now. Someone said something about problems with floats but i didnt quite udnerstand it Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) Thanks! Hello. This is probably not good practice but I have two problems arising with the same piece of code. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My site</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> body { font-family: verdana, arial, helvetica, sans-serif; font-size: 0.8em; background: #cfcf00; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; padding-bottom: 2em; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #303030; } /* end body */ #logo_search { width: 100%; min-width: 957px; max-height: 79px; padding: 32px 0 0 0; border: 0; margin: auto; overflow: hide; background: #ffffff; } /* end #logo_search */ #logo_container { width: 40%; float: left; background: #ffffff; text-align: right; border: 0; border-bottom: 1px solid #ffffff; height: 51px; padding: 0; margin: auto; } /* end #logo_container */ #base { clear: both; padding-top: 1px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; width: 100%; background: #c0c0c0; } /* end #base */ #main_block { background: #ff0000; margin: auto; text-align: left; width: 955px; } /* end #main_block */ #main_content { background: #ffffff; border-left: 1px solid #ff0000; padding-top: 1em; padding-bottom: 1em; border-right: 1px solid #ff0000; } /* end #main_content */ #top_main_content ul { float: left; list-style-type: none; border-spacing: 0; padding: 0; text-align: right; border-top: 1px solid #00ff00; height: 243px; width: 266px; } /* end #top_main_content #links_table */ #top_main_content ul li { vertical-align: middle; color: #0000ff; border-bottom: 1px solid #00ff00; } /* end #top_main_content #links_table td */ #top_main_content ul li a { line-height: 26px; padding-right: 1em; display: block; color: #0000ff; width: 259px; } /* end #top_main_content ul li a */ #top_main_content ul li a:hover { background: #cfcf00; color: #000000; } /* end #top_main_content ul li a:hover */ #top_main_content img { border-bottom: 1px solid #00ff00; border-top: 1px solid #00ff00; margin-top: 12px; text-align: right; vertical-align: top; } /* end #top_main_content img */ </style> </head> <body> <div id="logo_search"> <div id="logo_container"> </div> </div> <div id="base"> <div id="main_block"> <div id="main_content"> <div id="top_main_content"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> </ul> <img src="#" alt="" id="main_graphic" height="243" width="687"/> </div> </div> </div> </div> </body> </html> Problem 1 (Opera rendering): Opera (and only Opera from what I've noticed) is extended the border for the menu options into the side border. How can I eliminate this behavior? I added a margin-left: 1px to the menu and that will render it correctly in Opera but have an extra 1px of whitespace everywhere else. Problem 2: I'm trying to position this menu such that it lines up exactly with an image 243px high. One question I have is that if I add a 1px top and bottom border to an image that is 243px high, would that object still be 243px high or now 245px high? Also, I want to indent the menu options slightly so that they aren't exactly next to the image but I still need the entire bar to serve as a link. What would be the best approach to line up these objects. I can sort of do it with margin-top but I'm sure that's not the best way to go. Edited to add: Problem 3: The menu does not align with the left edge of the main section in IE and only IE. What can I do to fix this? Hi all, below is the code i have in my css, but from some reason my website is showing blue instead of yellow for links can you tell my why this is happening ffff00 is suppose to be yellow, at least that is what Expression web 2 shows. /* Sets the style for unvisited links. */ a, a:link { color: #FFFF00; text-decoration: underline; font-weight: bold; } Do to forum rules i can't post my url, so i know it will be difficult to troubleshoot. but thanks, for all the help you can give me. Bustersnm I'm trying to get my page to format correctly in IE. It looks fine in firefox, but in IE when the page is first loaded the footer isn't at the very bottom of the window. If I refresh the screen it drops down to the bottom and it looks fine. Here is my HTML and CSS. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="./nmi.css"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title>Client Server NMI</title> </head> <body> <!-- TitleBar --> <div id="titleBar"> <div id="titleImg"> <img src="./title_csnmi.jpg" alt="title image"> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> <div class="titleLinks"> <a href="./aboutus.html"><img src="./icon_aboutus.jpg" alt="about us"></a> </div> </div> <!-- Clear out the float settings --> <div class="clearDiv"></div> <!-- Main Page --> <div id="container"> <div id="iframe"> <iframe src="foo.html" name="main" frameborder=0 width=100% height=100%></iframe> </div> <div id="navBar"> <h4>Interface Menu</h4> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> <a href="./link">link</a> </div> </div> <div class="clearDiv"></div> <div id="footer"> Client Server NMI - MEDITECH </div> </body> </html> Code: html{ margin:0; padding:0; } body{ margin: 0; padding: 0; font-family: Verdana; font-size: 12px; color: black; } /*Title Navigation bar */ #titleBar{ position: absolute; top:3px; width: 100%; padding:5px 0 5px 0; border-bottom:2px solid gray; border-top:2px solid gray; } #titleImg{ position:relative; margin:10px 40px 0 5px; float:left; } img{ text-decoration:none; border:0; } .titleLinks{ position:relative; float:left; margin-left:2px; padding:5px 15px 0 15px; border:1px solid gray; width:auto; height:auto; } .clearDiv{ clear:both; } /*Main Div*/ #container{ position:absolute; margin:0; padding:0; top:100px; width:100%; height:74%; } #iframe{ position:relative; margin:0; padding:0; width:85%; height:100%; float:left; } /*Side Navigation bars*/ #navBar{ position:relative; float:left; margin-left:10px; width:13%; font-size:10px; border-left:1px solid #333366; border-right:1px solid #333366; border-bottom:4px solid #333366; } #navBar h4{ margin:0; padding:2px 3px 2px 0; background-color:#333366; font-size:1em; color:#EEEEEE; text-align:right; } #navBar a{ display:block; text-decoration:none; color:black; background-color:#EEEEEE; padding:4px 2px 4px 8px; } #navBar a:hover{ background-color:#333366; font-weight:bold; color:white; } /* Footer */ #footer{ position: absolute; width: 100%; bottom:0; left:0; font-size:.75em; text-align:right; background-color:#333366; color:white; } So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code: div#footer { position: relative; height: 25px; width: 100%; } span#left-bg { position: absolute; left: 0; bottom: 0; width: 400px; height: 600px; background: transparent url(some-url.png) no-repeat 0 0; z-index: -1; } span#left-bg { position: absolute; right: 0; bottom: 0; width: 400px; height: 600px; background: transparent url(some-url.png) no-repeat -400px 0; z-index: -1; } in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that? hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code: body { margin:0px; padding:0px; font-family: Georgia; color:#333; background-color:#FFFFD2; } h1 { margin:0px 0px 15px 0px; padding:0px; font-size:28px; line-height:28px; font-weight:900; color:#ccc; } p { font:11px/20px Georgia; margin:0px 0px 16px 0px; padding:0px; } #Content>p {margin:0px;} #Content>p+p {text-indent:30px;} a { color:#ffffd2; font-size:13px; text-decoration:none; /*font-weight:600;*/ font: Georgia; } a:link {color:#ffffd2;} a:visited {color:#ffffd2;} a:hover {background-color:#A4AA54;} a.blue { color:#0000CC; font-size:11px; text-decoration:none; font-weight:600; font: Georgia; } a.blue:link {color:#0000CC;} a.blue:visited {color:#0000FF;} a.blue:hover {background-color:#eee;} #logodiv { position:absolute; top:6px; left:14px; width:91px; height:126px; background-image: url(../images/logo/gglogoweb.gif); background-position: 1% 2px; background-repeat:no-repeat; visibility: visible; z-index:1; } #slogandiv { position:absolute; top:0px; left:0px; width:100%; height:137px; background-color:#A4AA54; visibility: visible; z-index:0; /* This is a fix for IE% */ voice-family: "\"}\""; voice-family:inherit; height:137px; width:100%; /* the correct height */ } /* "be nice to Opera 5" */ body>#slogandiv {height:137px; width:100%;} #MenuBar { position:absolute; top: 136px; left:0px; width:100%; height:32px; padding-bottom:2px; background-color:#667138; border-bottom:0px solid #A4AA54; line-height:17px; z-index:1; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family:inherit; height:32px; } /* Again, "be nice to Opera 5". */ body>#MenuBar {width:100%; height:32px;} #Content { position:absolute; top: 175px; left: 185px; width: 81%; padding:15px; border: 0px solid #000000; background-color:#ffffd2; z-index:0; } body>#Content {width:81%;} #Menu { position:absolute; top: 166px; left:0px; width:150px; padding:10px; background-color:#667138; border-right:2px solid #A4AA54; border-top:0px solid #A4AA54; line-height:17px; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family:inherit; width:150px; } /* Again, "be nice to Opera 5". */ body>#Menu {width:150px;} and the other Code: /* CoolMenus 4 - default styles - do not edit */ .clCMAbs{position:absolute; visibility:hidden; left:0; top:0} /* CoolMenus 4 - default styles - end */ /*Style for the background-bar .clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden} /*Styles for level 0*/ .clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; } .clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;} .clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; } .clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138} /*Styles for level 1*/ .clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;} .clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;} .clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; } .clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54} /*Styles for level 2*/ .clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;} .clLevel2{background-color:Navy; layer-background-color:Navy; color:white;} .clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; } .clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */ i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt Hi I am completely stumped by this. My CSS is not rendering in FF, I am running FF on a mac. Two pages, they are nearly the same, but show one display Css and the other does not - No CSS and With CSS I have been going crazy trying to find out what is wrong. The CSS link is here Thanks Jake This is a bit of a weird one as its thrown me completely! I have a very simple collection of styled divs which when viewed in IE look rubbish as they have added a few extra pixels in height to the bottom. I've realized that this looks like a rendering issue as when you scroll the window down and back up the extra image thats appearing sometimes changes according to the speed you scroll at!!! (sometimes the line disappears and then re-appears if you scroll faster) I'm using IE 7 (emulated through IE8 as the real IE7 doesn't work on my vista machine????) also the IE tab mod for firefox and my brothers old xp machine with a working IE7 and the issue is occurring on all 3. However when put in IE8 mode it works Here is a lovely images to show whats going on... css + html... Code: <div style="padding:10px;"> <div style="background:url(/images/forums/middle.jpg) repeat-x left top;"> <div style="background:url(/images/forums/left.jpg) no-repeat left top;"> <div style="background:url(/images/forums/right.jpg) no-repeat right top; padding-bottom:10px;"> <div style="padding:18px; color:#FFFFFF; font-size:18px; padding-bottom:30px;">Catagories</div> <div style="padding-left:40px; padding-right:40px;"> <div style="font-size:14px;">Help and support with the Site</div> <div style="font-size:10px;">Need help with something on the site?</div> </div> <hr size="1" color="#999999" style="margin:10px 40px 10px 40px;"> <div style="padding-left:40px; padding-right:40px;"> <div style="font-size:14px;">Help and support with the Site</div> <div style="font-size:10px;">Need help with something on the site?</div> </div> </div> </div> </div> <div style="background:url(/images/forums/middle_bottom.jpg) repeat-x left top; height:4px;"> <div style="background:url(/images/forums/left_bottom.jpg) no-repeat left top; height:4px;"> <div style="background:url(/images/forums/right_bottom.jpg) no-repeat right top; height:4px;"></div> </div> </div> </div> thanks in advance for any reply I have run into a problem in 2 of my pages in IE they Render fine in Firefox but in IE you cannot see the top part of the text and in some you don't incounter this problem. but when you refresh page the Title and author and the top text will not show in IE just disapper and it will show up when you Scroll or Highlight the text. I been trying to figure out this problem for quite sometime now. The First Page Second Page Code: .top_article_pic { float:left; margin: 0 9px 0 0; } div#articles_bg { width:850px; background:#2A475F; padding:24px; } div#articles_page { background:#FFF; border:1px solid #000; padding:12px; } div#articles_page2 { height:800px; background:#FFF; border:1px solid #000; padding:12px; } span.h1 { font-family:Arial,Verdana,Sans-serif; font-size:2em; color:#2A475F; font-weight:bold; } span.author { font-family:Arial,Verdana,Sans-serif; font-size:.9em; font-style:italic; color:#2A475F; } div#articles_page p.main_article { margin:18px 0 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; } div#articles_page p.main_article_p{ width:500px; margin:18px 17px 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; float:left; background:#FFF; } img.right_thumb { border:1px solid; } p.click_enlarge { font:.8em Arial,Verdana,Sans-serif; color:#2A475F; } div#articles_page p.main_article_p2{ margin:12px 0 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; background:#FFF; } img.right_float { float:right; margin:0 0 0 15px; border:1px solid #000; } p#left_article { margin:10px 0 0 0; color:#000; font:.8em Arial,Verdana,Sans-serif; } p.article2 { margin:9px 0 0 0; text-align:justify; font:.8 Arial,Verdana,Sans-serif; width:530px; font:.8em Arial,Verdana,Sans-serif; } div.right_pic { width:161px; padding:10px; font:.8em Arial,Verdana,Sans-serif; color:#2A475F; margin:0 10px 0 0; float:left; background:#ccc; border:1px solid #000; } Thanks in Advance My navigation displays correctly in IE 7+ and Mozilla Firefox, however in IE Under 7 the navigation places a double line and adds additional padding to the navigation. Does anyone have a remedy for this problem? On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around? Thanks I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right? So, how do I fix this so it works in IE? I've posted a sample page with the problem he http://aaron.verge-rpg.com/vergebrd/test.html Any help would be appreciated. I'm helping my cousin with a design he's doing for a college class. Everything renders out a-OK in Firefox, but in Internet Explorer, the "content" gets pushed way down. The URL is http://jordanmeeter.com/captcalstudios/ . Any theories as to what is causing this? Hi there. I have discovered something odd in FF - When rendering borders, the FF engine has a strange offset. If you have the border-top:none; then the right border is exactly 1px higher than the left border. Have anyone experienced the same problem ? - Emil |