A strange CSS problem with Opera

4 replies
  • WEB DESIGN
  • |
I am working on a page design and have a navigation panel on the right hand side. It displays perfectly well in IE, FF and Chrome, but in Opera weird things happen.



As you can see, three of the links are not following the CSS that the others are.

This is the CSS:

Code:
li a:link,a:visited {
	display: block;
	color: navy;
	background-color: white;
	width: 280px;
	text-align: center;
	padding: 4px;
	text-decoration: none;
	margin-bottom: 2px;
	border: solid silver 1px;
}
and this is the HTML:

Code:
<div id="links">
<h3>Links and Resources</h3>
	<ul>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/join%20ebay.html">Please support this site by signing up for ebay, click here</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/whatshot.htm">What's hot on ebay 1-75s + Superfasts</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/2index/lesney.htm">The early Lesney toys guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/1index/xx175series.htm">1-75 Regular wheels and superfast guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/1index/gg175series.htm">1-75 Regular wheels price guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/lesneyonline/">Pats 1-75 box info</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/1index/giftset.htm">Giftset and Garage price guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/4index/mg.html">MG1 Garage guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/2index/accessor.htm">Accessory packs guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/2index/major.htm">Major packs guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/kingsindex.htm">Kingsize guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/yesteryears/modelsof.htm">Yesteryears guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/yesteryears/modelsof.htm">Yesteryear boxes</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/3index/benbros.htm">Benbros guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/3index/charben.htm">Charbens guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/corgiindex.htm">Corgi price guide + what's hot on ebay</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/dinkyindex.htm">Dinky price guide + what's hot on ebay</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/4index/husky.htm">Husky, Corgi Juniors and Rockets guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/3index/kemlows.htm">Kemlows guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/morris.htm">Morestone guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/3index/dcmtl.htm">DCMT Lone star locos guide</a></li>
		<li><a href="http://www.vintagebritishdiecasts.co.uk/">Vintagebritishdiecasts homepage</a></li>
		<li><a href="http://moyboyz.com/phpBB3/">Moyboys Yesteryear forum</a></li>
		<li><a href="http://www.collectors-club-of-great-britain.co.uk/Events/Category/Toyfair--Swapmeet/_cat5">British toy fair calendar</a></li>
	</ul>
</div>
Only Opera seems to be affected - can anyone tell me where I'm going wrong, or how to fix it!

Martin
#css #opera #problem #strange
  • Profile picture of the author avajo71
    Could you post the site url here?
    {{ DiscussionBoard.errors[8533243].message }}
  • Martin,

    I’m assuming you tried the obvious things of clearing Opera’s cache and restarting it? What about screen settings for that browser? It seems odd that all the other identical elements would obey the CSS and those three wouldn’t. Seems like a space issue to me. If you can post the URL I would be happy to play around with the site using Chrome elements panel.
    Best,

    Shawn
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[8533258].message }}
    • Profile picture of the author Martin Avis
      Thanks guys, the site is currently at Lesney Matchbox 6c Euclid 6-Wheel Quarry Truck

      All the CSS is on page while I'm developing the design, so you might see if anything else could be clashing. Although, why just those three elements is beyond me!

      Martin

      P.S. Incidentally, I am aware that only the first picture is displaying - that's not a problem.
      Signature
      Martin Avis publishes Kickstart Newsletter - Subscribe free at http://kickstartnewsletter.com
      {{ DiscussionBoard.errors[8533353].message }}
      • Profile picture of the author Brandon Tanner
        Martin,

        I just checked that page in the most recent version of Opera (v. 16), and I can't replicate your problem. All of the links on the right side of the page display fine for me.

        You do have some other layout issues on that page though, particularly for screen resolutions of 1024x768 (which is still a somewhat popular resolution). The 'Firesizer' plugin for Firefox is great for replicating various screen sizes.
        Signature

        {{ DiscussionBoard.errors[8533507].message }}

Trending Topics