Welcome to WebmasterWorld Guest from 54.145.173.147

Forum Moderators: open

Message Too Old, No Replies

Opera breaks my navigation

   
8:12 pm on Mar 3, 2010 (gmt 0)

10+ Year Member



Hello,
My website has been running for 5 years without any problems on the major browsers. The site validates to XHTML strict. Opera release 10.10 for some reason has broken my navigation and release 10.50 continues the problem. Previous versions were ok. The site is ok on IE8, Firefox, Chrome, Safari.

My navigation panel is in definition list format and has a graphic immediately below the last button. When the page is opened the graphic rides up over the nav buttons. The nav buttons show up when I hover over the graphic. I am happy to post code if that would help.
Does anyone have any idea what could be happening and what I can do about it.
Thanks for taking the time.

Regards
10:49 pm on Mar 3, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Sure - please give us a look at some code. I develop pages in Opera first - so I may well have seen whatever you are running into.

There's a thread called LINKS and posting CODE [webmasterworld.com] that offers help for how to keep code examples within our guidelines.
5:51 pm on Mar 4, 2010 (gmt 0)

10+ Year Member



Thanks, Tedster.

I hope this helps. I have only included the basic nav code. It is served as a php include file.

<!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">


<div id="sidebar">
<dl id="gallery">
<dd class="current">Home</dd>
<dd><a href="example.php" title="example">example</a></dd>
<dd><a href="exampleone.php" title="exampleone">exampleone</a></dd>
<dd><a href="exampletwo.php" title="exampletwo">exampletwo</a></dd>
<dd><a href="examplethree.php" title="examplethree">examplethree</a></dd>
<dd><a href="examplefour.php" title="examplefour">examplefour</a></dd>
<dd><a href="examplefive.php" title="examplefive">examplefive</a></dd>
<dd><a href="examplesix.php" title="examplesix">examplesix</a></dd>
<dd><a href="examplesevern.php" title="exampleseven">exampleseven</a></dd>
<dd><a href="exampleeight.php" title="exampleeight">exampleeight</a></dd>
<dd><a href="examplenine.php" title="examplenine">examplenine</a></dd>
<dd><a href="exampleten.html/exampleten/exampleten.php" title="exampleten">exampleten</a></dd>
</dl>

<img id="poppy" src="images1/poppy.jpg" width="148" height="198" alt="poppy" />

Thank you.

Regards
3:33 am on Mar 5, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



How about the CSS rules for those IDs? and where do the divs you opened get closed?
2:45 pm on Mar 6, 2010 (gmt 0)

10+ Year Member



I have about seven different images below my navgation bar and the navigation div is closed after he last image.

CSS for the sidebar is as follows:

#sidebar {
float:left;
width:150px;
\width:170px;
w\idth:150px;
margin:0;
margin-right:0;
padding:10px;
background-color: #fff;
}

#sidebar dl{
width: 148px;
margin: 0 auto;
padding: 0;
border-left: 1px solid navy;
border-right: 1px solid navy;
border-top: 1px solid navy;
border-bottom: 1px solid navy;
}

#sidebar dd {
margin:0;
padding:0;
color: blue;
font-size: 9px;
border-top: 1px solid #fff;
background: #fff2c8;
}

#gallery a {
background: #cfd7ff url(images1/c1arrowr.gif) 5px 50% no-repeat;
color:gray;
text-decoration:none;
font-weight: normal;
display:block;
padding-left: 24px;
height: auto;
overflow: hidden;
}

#gallery a:hover {
background: #F0FFFF url(images1/c1arrowr.gif) 5px 50% no-repeat;
color:blue;
text-decoration: underline;
}

#sidebar dd.current {
padding-left: 24px;
background: #fff8dc url(images1/green1.gif) 5px 50% no-repeat;
color: navy;
}

#poppy {
border: 1px solid navy;
margin-top: 2px;
}

Thanks for your time.
4:53 pm on Mar 7, 2010 (gmt 0)

10+ Year Member



It would appear that I have solved my own problem.

<img id="poppy" src="images1/poppy.jpg" width="148" height="198" alt="poppy" />


Putting the above in a div sorted the problem but I am curious how the code [minus div] was not an issue in previous versions of the browser. Furthermore is it poor practice doing what I did previously, and not enclosing the image in a div.
Always willing to learn.
Regards
6:58 pm on Mar 7, 2010 (gmt 0)

WebmasterWorld Senior Member jdmorgan is a WebmasterWorld Top Contributor of All Time 10+ Year Member



So was the problem something to do with the "poppy" CSS not being applied to the "naked" <img> tag, but only when that <img> was enclosed in a div with that same id? -- A pure CSS problem, in other words?

That would imply some change in CSS inheritance behavior with the Opera 10.x release.

Curious because I always seem to be banging my head against strange CSS problems. I figure that as soon as I finally learn "the one true way" to do CSS properly --having come into the CSS game relatively late-- then I'll cease to continue running into these problems -- Well, I'm hopeful, anyway. :)

Jim
7:14 pm on Mar 7, 2010 (gmt 0)

10+ Year Member



Yes, Jim. All I did was enclose the poppy image in a div tag and nothing else was changed. I did report the original problem to Opera after 10.10 but was disappointed to see 10.50 made no difference. My concern is that I wouldn't expect new versions of a browser to break a site that was previously ok In the older versions.

Thanks
S
8:05 pm on Mar 7, 2010 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I love it when the "it ain't broke but let's fix it anyway" crowd is involved. Sorry, not advancing the discussion, merely <rant>venting</rant>.
3:15 pm on Mar 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My concern is that I wouldn't expect new versions of a browser to break a site that was previously ok In the older versions.


One of the major changes in 10.5 was the rendering engine... didn't you see the changelog or view the announcements? And Opera sure isn't the first (or last) browser to have things render differently in different versions.