Opera breaks my navigation

Forum Moderators: open

Message Too Old, No Replies

Opera breaks my navigation

shug

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

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

tedster

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

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.

shug

5:51 pm on Mar 4, 2010 (gmt 0)

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

tedster

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

How about the CSS rules for those IDs? and where do the divs you opened get closed?

shug

2:45 pm on Mar 6, 2010 (gmt 0)

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.

shug

4:53 pm on Mar 7, 2010 (gmt 0)

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

jdMorgan

6:58 pm on Mar 7, 2010 (gmt 0)

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

shug

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

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

tangor

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

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>.

mattglet

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

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.