1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Website not displaying correctly in Opera mini problem

Discussion in 'CSS' started by jazzo, Oct 14, 2011.

0
  1. #1
    Hi there, I have a problem with my site displaying in Opera mini, and I am not sure whether it is a problem with the script or the css (although I am inclined to believe it is the latter).
    I have a samsung galaxy gt-I5700 and I have opera mini installed. If I use the default browser and click on any of the thumbnails on this page of my site http://www.antobbo.webspace.virginmedia.com/photogallery/water.htm
    everything works well, but when I use opera mini, everything goes bananas the picture comes up in an hidden area and I can't scroll across to view it because it has position fixed.
    I came across this thread earlier on http://forums.digitalpoint.com/showthread.php?t=1612014 so I am a bit unsure what to do. Should I attempt to create a css just for opera mini (and then facing the issue of having to update that as well)...? What do you guys suggest?
     
    jazzo, Oct 14, 2011 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    My advice, axe the annoying/bloated/time wasting lightbox-style script and just let people *SHOCK* open the blasted image.

    Sorry, pet peeve -- I HATE lightbox effects; all lightbox has done for me is teach me to always middle click on image links so I can bypass it.

    Though the page itself isn't exactly conducive to cross-browser coding, AND it's got a nasty case of divitus and classitus -- as Carlin said "Not every ejaculation deserves a name" -- or in this case, if you have a perfectly good parent wrapping element (div.thumbcontainer) and all it's children are getting the exact same classes (div.thumbnail, a.full_image)-- NONE of them need classes... I would say about 90% of your DIV are unnecessary for this layout from the extra wrappers around perfectly good block level containers (.inner_wrapper, .banner, .heading_1, .navigation, etc) to things that should probably be a list (like the entire gallery) -- it's massively over-thought when really this is a very simple page.

    ... much less the inlined style on all the images for christmas only knows what and the manual scripting hooks for what should be applied BY the script instead.

    A "real" lightbox style script may also be a better choice (I'd just lose the effect entirely, but I hate scripting for nothing so...) -- having the images loaded WHEN they are clicked on instead of caching them like that in the markup... which is just so wrong... and of course that jquery bloat for nothing certainly can't be helping matters.

    BTW, it's "born and bred", not "born and bread" :D Makes me hungry for corn bread or something.

    Bottom line -- you've got about 10k of HTML doing 3 or 4k's job.

    It is extremely unlikely even keeping the lightbox effect that if I were to write the same page it would end up much more than:

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

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="Conveying a sense of gloom, faith and light through photography"
/>

<meta
	name="keywords"
	content="Photography,Digital,Antonio,Borrillo,Gloom,Faith,Light"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Antonio Borrillo Photography - Water
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Antonio Borillo Photography
	</h1>

	<ul id="mainMenu">
		<li><a href="home.htm">Home</a></li>
		<li><a href="gallery.htm">Gallery</a></li>
		<li><a href="portfolio.htm">Portfolio</a></li>
		<li><a href="bio.htm">Bio</a></li>
		<li><a href="contact.htm">Contact</a></li>
	</ul>

	<h2>Water</h2>

	<ul id="gallery">
		<li>
			<a href="images/water_full_1.jpg">
				<img src="images/water_thumb_1.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_2.jpg">
				<img src="images/water_thumb_2.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_3.jpg">
				<img src="images/water_thumb_3.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_4.jpg">
				<img src="images/water_thumb_4.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_5.jpg">
				<img src="images/water_thumb_5.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_6.jpg">
				<img src="images/water_thumb_6.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_7.jpg">
				<img src="images/water_thumb_7.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_8.jpg">
				<img src="images/water_thumb_8.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_9.jpg">
				<img src="images/water_thumb_9.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_10.jpg">
				<img src="images/water_thumb_10.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_11.jpg">
				<img src="images/water_thumb_11.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_12.jpg">
				<img src="images/water_thumb_12.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_13.jpg">
				<img src="images/water_thumb_13.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_14.jpg">
				<img src="images/water_thumb_14.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_15.jpg">
				<img src="images/water_thumb_15.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_16.jpg">
				<img src="images/water_thumb_16.jpg" alt="" />
			</a>
		</li><li>
			<a href="images/water_full_17.jpg">
				<img src="images/water_thumb_17.jpg" alt="" />
			</a>
		</li>
	</ul>

	<div id="footer">
		All photos and content &copy; 2011 Antonio Borrillo.
		Please read the
		<a href="terms_and_conditions.html">terms and conditions here.</a>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

<script
	type="text/javascript"
	src="images/galleryBox.js"
></script>

</body></html>
    Code (markup):
    As that's really all it needs for markup... (excuse the XHTML, it's what I do)

    The excessive HTML bloat, use of that jquery nonsense (as a dearly departed friend used to say, the only thing you can learn from Jquery is how not to write javascript), fixed width layout, lack of media target use for handhelds all add up to the page being a disaster cross-browser on desktop... much less mobile.

    I was actually a little surprised you were complaining about mini, but don't have anything in there code-wise to target handheld/mobile.
     
    deathshadow, Oct 15, 2011 IP
  3. jazzo

    jazzo Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    deathshow,
    the reason why my code isn't the greatest ever is because I am still at the very beginning, so I am trying to learn! The numerous divs and classes - or
    as you like calling them - is really there more for my own reference then anything else, and yes, true, it might make the code a bit bulky but it helps me to position - or at least attempt to position - elements correctly so much so that you will see that 90% of them have a border applied and then eventually commented out.
    About my jquery, everybody says the same thing: "why don't you get a plug-in"? and I always say the same thing: I am attempting to learn jquery so if I don't try to build scripts myself what am I gonna learn?
    Finally to get to the mobile issue, yes I don't have anything in my css that targets mobile devices as yet, that's the reason why I posted in the first place, to get some advice as to what to do and whether it is worth doing it. The default browser on my android phone works ok-ish, but opera mini not at all.
    thanks
     
    jazzo, Oct 15, 2011 IP