SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange Opera Problem

    For some reason the top-right menu in this layout is invisible in Opera 8.5 & 8.51. Otherwise the layout works fine. Anyone know why this layout is causing Opera to not display the top-right menu?

    http://ltda.redirectme.net/test/

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #top-menu-wrapper {
    	float: right;
    	color: #FFFFFF;
    	margin-top: -50px;
    }
    The margin-top: -50px; part is what is causing the trouble, making it margin-top: 50px; puts it in the right spot for opera but messes it up in firefox. The problem is that firefox floats the div at the bottom, but opera floats it at the top.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for pinpointing the problem for me. I wonder what the best way to achieve the same thing in all browsers would be? Can you suggest something?

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found an opera only hack, not sure if it's the best way to go about it, but it works.

    http://www.fu2k.org/alex/css/hacks/fuzzyspecificity#op8

    Edit: This opera hack breaks the layout in IE 5.x - guess it's back to the drawing board.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found a javascript hack that works to isolate opera, on sitepoint forums no less.

    http://www.sitepoint.com/forums/show...ighlight=opera

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    re arange the top header section of your html, don't nest/wrapp the right menu, you also have to clear the image/right menu floats

    use a normal flow whitout negative margins, images, ul, etc are elements that need no div wrapped around them for positioning ?

    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" xml:lang="en" lang="en">
    <head>
    <title>Coop La Tour Des Alentours</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* Coop La Tour Des Alentours CSS File
    Background green: #E7EED7
    Dark green: #0C310B
    Light green: #92CC47
    Orange: #FEC42D
    All CSS Code Copyright Coop La Tour Des Alentours 2005 */
    
    *{margin:0;padding:0;}
    
    body {
    	background: #E7EED7 url(top-bg.png) top repeat-x;
    	text-align: center;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	height: 100%;
    }
    
    p{padding: 0 0 15px 0;}
    
    #global-wrapper {width: 770px;margin: 0 auto;}
    
    #logo-header{text-align:left;
    }
    #logo-header img{float:left;}
    
    /* Top-menu styling START */
    #top-menu-wrapper{
    	float: right;
    	color: #ff0000;
    	margin-top:30px;
    }
    
    #top-menu-wrapper a {
    	color: #FFFFFF;
    }
    
    #top-menu, #top-menu ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    #top-menu a {
    	display: block;
    	width: 5.5em;
    }
    
    #top-menu li { /* all list items */
    	float: left;
    	width: 5.5em; /* width needed or else Opera goes nuts */
    }
    
    #top-menu li ul { /* second-level lists */
    	position: absolute;
    	background: #FEC42D;
    	width: 5.5em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #top-menu li:hover ul, #top-menu li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    }
    /* Top-menu styling FINISH */
    
    #main-wrapper {
    	padding: 0 0 15px 0;
    	margin: 0;
    	background-color: #fff;
    }
    
    #main {
    	padding: 15px 15px 0 15px;
    	text-align: left;
    	line-height: 130%;
    }
    
    .clearfix:after {
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    /* End hide from IE-mac */
    
    /* Nav Styling START */
    #nav{
    	clear:both;
    	/*width: 770px;*/
    	margin-top: 19px;
    	background: #0C310B url(btn-bg.jpg) top repeat-x;
    	text-align: center;
    	padding: 9px 0 9px 0;
    	font-size: 1.2em;
    }
    
    /* Hides from IE-mac \*/
    * html #nav{margin-top: 19px;}
    /* End hide from IE-mac */
    
    #nav ul {
    	margin: 0;
    	padding: 0;
    }
    
    #nav li {
    	padding: 0 15px 0 15px;
    	list-style: none;
    	display: inline;
    }
    
    #nav a { 
    	text-decoration: none;
    	font-weight: normal;
    	color: #FFF; 
    } 
    
    #nav a:hover, #nav a.active, #sponsors a:hover, #footer a:hover { 
    	color: #FEC42D;
    } 
    /* Nav Styling FINISH */
    
    /* Link Styling START */
    a { 
    	text-decoration: underline;
    	font-weight: normal;
    	color: #0C310B;
    } 
    
    a:hover, a.on { 
    	color: #FEC42D;
    } 
    /* Link Styling FINISH */
    
    /* Sidebar styling START */
    #sidebar-left {
    	float: left;
    	width: auto;
    	height: auto;
    }
    
    #sidebar-left .block {
    	width: 170px;
    	background: #E7EED7 url(menu-corner.png) top left no-repeat;
    	padding-top: 15px;
    	margin-bottom: 15px;
    	overflow: hidden;
    }
    
    .sidebar ul {
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    }
    
    .sidebar li {
    	padding: 0;
    	margin: 0;
    	border-top: 1px solid #D5DCC6;
    	list-style-type: none;
    }
    
    .sidebar li a {
    	padding: 5px 0 5px 10px;
    	display: block;
    	width: 100%;
    }
    
    html>body .sidebar li a {
    	width: auto;
    }
    
    .sidebar ul li ul li a {
    	padding-left: 30px;
    }
    
    .sidebar ul li ul li ul li a {
    	padding-left: 50px;
    }
    
    .sidebar a { 
    	text-decoration: none;
    	font-weight: bold;
    	color: #0C310B;
    } 
    
    .sidebar a:hover, .sidebar a.active { 
    	color: #FEC42D;
    	background-color: #0C310B;
    } 
    
    .menu {
    	padding: 0;
    	margin: 0;
    }
    
    .item-list ul, .item-list ul li {
    	list-style-type: none;
    	padding: 0;
    	margin: 0;
    }
    /* Sidebar styling FINISH */
    
    /* Content styling START */
    #middle-content {
    	padding: 0;
    	margin-left: 185px;
    	text-align: left;
    }
    
    * html #middle-content{margin-left: 182px;}
    
    #middle-content table {
    	font-size: 0.75em;
    }
    
    .profile {
    	padding: 0;
    	margin-top: -150px;
    }
    /* Content styling FINISH */
    
    /* Footer styling START */
    #footer {
    	background: #0C310B;
    	color: #FFFFFF;
    	padding-top: 15px;
    	text-align: center;
    }
    /* Footer styling FINISH */
    
    /* Search styling START */
    .search-form {
    	padding: 0 0 0 11px;
    }
    
    * html .search-form {padding: 0 0 0 8px;}
    /* Search styling FINISH */ 
    </style>
    <script type="text/javascript">
    sfHover = function() {
    	var sfEls = document.getElementById("top-menu").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script></head>
    <body>
    	<div id="global-wrapper">
    		<div id="logo-header" class="clearfix">
    			<img src="logo.png" width="435" height="90" alt="Coop La Tour Des Alentours" />
    				
    				<div id="top-menu-wrapper">
    					<ul id="top-menu">
    						<li><a href="##">Create</a>
    							<ul>
    								<li><a href="##">Page</a></li>
    								<li><a href="##">Document</a></li>
    								<li><a href="##">Event</a></li>
    								<li><a href="##">Image</a></li>
    							</ul>
    						</li>
    						<li><a href="##">Account</a></li>
    						<li><a href="##">Admin</a></li>
    						<li><a href="##">Log Out</a></li>
    					</ul>
    				</div>
    		</div>
    			
    			
    	
    			<div id="nav">
    				<ul>
    					<li><a class="on" href="##">Home</a></li>
    					<li><a href="##">About Us</a></li>
    					<li><a href="##">Membership</a></li>
    					<li><a href="##">Contact</a></li>
    				</ul>
    			</div>
    		
    		<div id="main-wrapper">		
    			<div id="main" class="clearfix">
    				<div id="middle-content">
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id arcu. Aenean rhoncus. Donec venenatis faucibus erat. Morbi luctus, diam vitae volutpat dictum, ante elit consectetuer mauris, non ornare libero nisi a nisi. Aliquam nibh. Donec velit. Morbi tristique risus a nulla. Donec imperdiet. Mauris eget quam sit amet sem euismod dictum. Sed et lectus nec mauris vehicula tempor. Maecenas lectus turpis, sodales ut, dictum nec, ornare sit amet, enim. Donec eu lorem id nisi venenatis convallis. Fusce sit amet enim. Mauris ligula mi, lacinia sit amet, sollicitudin quis, luctus sed, elit. Morbi imperdiet risus id augue.</p>
    					<p>Quisque facilisis quam quis ante. Vestibulum dapibus sagittis orci. Vivamus volutpat. Suspendisse dignissim, augue eu posuere convallis, nunc mi sagittis mauris, sed euismod risus lectus at sem. Curabitur massa. Aenean in nunc. Vestibulum nonummy scelerisque sem. Suspendisse fringilla. Donec odio eros, cursus in, lacinia eu, rhoncus nec, lectus. Nulla lobortis purus sed velit. Nunc augue velit, sollicitudin nec, convallis vitae, ultrices ut, nulla. Praesent dictum consequat tortor.</p>
    					<p>Etiam at mauris sed magna tincidunt scelerisque. Aenean at metus id tortor semper rutrum. Vestibulum iaculis posuere enim. Curabitur ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ipsum turpis, consectetuer nec, vulputate ac, tincidunt et, turpis. In nisl. Ut nunc. Suspendisse eget pede sed tellus pretium condimentum. Etiam fringilla gravida odio. Suspendisse potenti. Phasellus augue odio, sollicitudin et, ornare ut, sollicitudin sodales, mi. Nunc erat orci, vehicula at, molestie at, consectetuer in, neque. Nulla ac odio ac dui bibendum faucibus. Morbi dui. Donec ac enim quis purus accumsan commodo. Nam mollis mi sed tortor. Fusce imperdiet.</p>
    					<p>Nullam orci tortor, feugiat at, ullamcorper vitae, consequat eu, arcu. Vivamus fringilla imperdiet lacus. Aenean fermentum sapien eget turpis. Donec ullamcorper mi non metus. In id nisi et metus accumsan aliquet. Aenean sed nibh. Quisque eget dui. Praesent posuere tristique enim. Mauris imperdiet pretium felis. Maecenas odio tortor, semper ut, cursus ut, dictum in, nulla. Integer ut mauris vitae lorem porta volutpat. Morbi in orci.</p>
    					<p>Curabitur id magna. Aliquam consequat nunc sit amet nulla. Donec sed mauris sed diam bibendum adipiscing. Proin rhoncus arcu et enim. Curabitur lacinia nisi. Nunc justo eros, pretium non, pretium dignissim, luctus sit amet, nibh. Curabitur tempus quam. Pellentesque turpis urna, congue et, tempus nec, tempus et, libero. Vivamus sodales facilisis lacus. In eget nisl sit amet velit accumsan faucibus. Nam dapibus. Curabitur a nisl. Mauris ac arcu nec odio lobortis congue. Integer in dolor ut lectus volutpat faucibus. Donec nisi. Curabitur rutrum ultricies dolor. Donec et orci.</p>
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id arcu. Aenean rhoncus. Donec venenatis faucibus erat. Morbi luctus, diam vitae volutpat dictum, ante elit consectetuer mauris, non ornare libero nisi a nisi. Aliquam nibh. Donec velit. Morbi tristique risus a nulla. Donec imperdiet. Mauris eget quam sit amet sem euismod dictum. Sed et lectus nec mauris vehicula tempor. Maecenas lectus turpis, sodales ut, dictum nec, ornare sit amet, enim. Donec eu lorem id nisi venenatis convallis. Fusce sit amet enim. Mauris ligula mi, lacinia sit amet, sollicitudin quis, luctus sed, elit. Morbi imperdiet risus id augue.</p>
    				</div>
    			</div>
    		</div>
    		<div id="footer">
    			
    		</div>
    	</div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •