Jump to content

Opera-specific CSS issue, please help


Recommended Posts




So I'm making this site (just coding, I didn't design it). It's fairly simple/straightforward, and I've got it to look just fine in both FF2, IE6 and IE7 on XP and Vista. However in Opera 9.25 on XP, there is one issue. Just take a look if you have Opera please: link.


As you can see, the navbar is getting pushed down below the logo in Opera, causing the whole page to move down. I've experimented a bit, and I've come to the conclusion that this is due to the "letter-spacing" attribute applied to the navbar <li>'s. It is set to 1px, which is rendered fine in FF and IE. But in Opera, it makes the spacing too wide, and pushes the navbar down below.


When I remove that attribute altogether, Opera looks the way I want it to. But now the others become too narrow. Is there any way to tell just Opera to not apply the letter-spacing? Or is there another way to solve this problem? I'd like to avoid JavaScript sniffers (and even PHP ones if possible), and I'm coding to XHTML 1.0 Strict.


Any help is much appreciated, thank you. biggrin.gif



<!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" lang="en" xml:lang="en"><head> <title>Essense Interior Design</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="images/icon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/screen-ie.css" media="screen" /> <![endif]--> <script type="text/javascript"><!-- Preload navigation hover images image1 = new Image(); image1.src = "images/hover1.gif"; image2 = new Image(); image2.src = "images/hover2.gif";  image3 = new Image(); image3.src = "images/hover3.gif"; image4 = new Image(); image4.src = "images/hover4.gif";  image5 = new Image(); image5.src = "images/hover5.gif"; //--></script></head><body> <div id="container">   <div id="header">     <div id="logo">    <a href="" onfocus="this.blur();"><img src="images/logo.gif" alt="Essense Interior Design" title="" /></a>  </div>  <div id="navbar">    <ul>   <li><a href="" id="home" onfocus="this.blur();">Home</a></li>   <li><a href="" id="portfolio" onfocus="this.blur();">Portfolio</a></li>   <li><a href="" id="design" onfocus="this.blur();">Design Elements</a></li>   <li><a href="" id="about" onfocus="this.blur();">About Us</a></li>   <li><a href="" id="contact" onfocus="this.blur();">Contact Us</a></li> </ul>     </div></div><div id="flash"><!--[if !IE]> --><object type="application/x-shockwave-flash" data="essenseFlash.swf" width="950" height="356"><!-- <![endif]--><!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"  width="950" height="356"><param name="movie" value="essenseFlash.swf" /><!--><!--dgx--><param name="loop" value="true" /><param name="menu" value="false" /><p style="margin-top: 160px; background-color: inherit; color: #006857">You need the newest version of <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" title="Update to the latest version of Adobe Flash" style="text-decoration: underline">Adobe Flash</a> in order to correctly view this website.</p></object><!-- <![endif]--></div><div id="footer">  <p style="margin-left: 430px">At Essense Interior Design,  <br />we bring together the principles  <br />of sustainability, energy and wellness  <br />to create living spaces that  inspire  <br />and nourish you.</p>  <p style="margin-left: 550px">We draw from nature  <br />and explore the forms,  <br />colors, energy flows and  <br />lighting that  <br />best suits you and the  <br />purpose of the spacees  <br />you inhabit.</p></div> </div></body></html>




body{margin: 0 auto 0 auto;padding: 9px 0 9px 0;font-family: Tahoma, Verdana, Arial, sans-serif;font-size: 17px;background-color: #333333;color: #FFFFCC;text-align: center;}img{border: none;}a{text-decoration: none;background-color: inherit;color: #006857;}#container{width: 950px;height: 800px;margin: 0 auto 0 auto;background-color: #DD8448;color: inherit;background-image: url('../images/feather.jpg');background-repeat: no-repeat;}#header{height: 118px;}#logo{float: left;padding: 33px 0 8px 81px;background-color: inherit;color: #006857;font-size: 25px;}#logo img{padding: 10px 10px 4px 10px;}#navbar{float: right;padding: 0 30px 0 0;height: 118px;text-align: right;}#navbar ul{margin: 0;padding: 1px 0 0 0;list-style-type: none;height: 118px;}#navbar ul li{float: left;margin: 0;padding: 0;font-size: 12px;font-family: Helvetica, Verdana, Arial, sans-serif;letter-spacing: 1px;padding: 58px 0 37px 0;}#navbar ul li a{text-decoration: none;padding: 58px 9px 37px 10px;font-weight: bold;}#navbar ul li a:hover{background-color: inherit;color: #FEFC97;background-repeat: no-repeat;background-position: center 15px;border-top: 1px solid #FEFC97;}#navbar ul li a#home:hover{background-image: url('../images/hover1.gif');}#navbar ul li a#portfolio:hover{background-image: url('../images/hover2.gif');}#navbar ul li a#design:hover{background-image: url('../images/hover3.gif');}#navbar ul li a#about:hover{background-image: url('../images/hover4.gif');}#navbar ul li a#contact:hover{background-image: url('../images/hover5.gif');}#flash{height: 356px;clear: both;background-color: #E7DB80;color: inherit;}#footer{padding-top: 35px;}#footer p{margin: 0 0 12px 0;padding: 0;font-family: Verdana, Arial, sans-serif;font-weight: bold;font-size: 12px;line-height: 22px;text-align: left;}




/* IE hacks */#navbar ul{float: right;}#navbar ul li{margin-top: -1px;padding-top: 59px;}#navbar ul li a{padding-top: 58px;}




edit: Also, if anyone is able to test in other browsers/OS's and notices anything funky, please let me know. Thank you.

Edited by TheRoper
Link to comment
Share on other sites

Anybody..? The only frikkin' thing I could do is use a JS browser sniffer to apply ONE stupid CSS rule for Opera.


I don't wanna do that unless I have to, ya know? But I can't find any CSS hacks that only apply to Opera.

Link to comment
Share on other sites

  • 2 weeks later...

I feel your pain, I've ran into the same problem before, unfortunately I'm extremely tired at the moment and reading through that is giving me a headache. I don't know if it helps but the following browsers don't load your page correctly;


Windows 2003 Server

Opera 9.26


Ubuntu 6 / 7

Opera 9.50

Navigator (Gecko 20080219)

Firefox (Gecko 20061201)

Firefox (Gecko 20080207)

Galeon 2.0.2 (Gecko 20080207)

Epiphany 2.20 (Gecko 20080207)

GranParadiso 3.0 (Gecko 2007100620)


I'm sorry, I can't recall the exact Presto versions on those Opera releases. Also, I just checked my apple box, and your current page loads perfect in the latest version of Safari.


Fortunately, the ones that don't load your page properly, all look 100% the same, and display the error exactly as you've described.


I can tell you from experience that Opera loves you to define everything, if you have something undefined, define it. Opera in my experience wants to be told exactly what to do.


Keep tweaking with it man, best of luck!

Edited by 3D-FX
Link to comment
Share on other sites

  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.