Paul, Thanks for your help. I agree totally with the last paragraph of your last post, and indicated as much to Ron, although my suggestion was a different CSS for non desktop devices.
As Ron indicated above, I have been mucking around with the code. I don’t have any sort of desktop emulator, so I tend to do things ‘live’. That actually stuffs you guys up somewhat 'cos you cannot ‘see’ what is happening. Ron has sent me some new code that I will put up shortly, and we can move on from there.
I don’t understand some of the code Ron has written previously, which is why I have been mucking around with it.
In regards to the latest problem of the seal dropping down on mobile devices, I noticed that it also retained its size. I can tell you that for some reason position: relative rather than position: fixed got rid of that problem. However in my mucking around I have stuffed things up completely, but hopefully Ron’s new code will fix that up.
Please don’t take it personally 
There IS indeed a long standing problem with the auto-mod system. If it went into the auto-mod system, a moddie will restore it shortly.
Exactly. We were going to try and track it down but with the upcoming move to Discourse we are focusing our “fix it” time to that.
Hi, compass1312.
I put the new files in the dropbox folder just after I read Paul’s last post. So if you downloaded them earlier, you should download the HTML files again… both the “c” and “d” versions were updated.
Sounds like my “highlights” and comments weren’t very clear after all. IF the new code works properly, and IF you want to understand in detail how it works, let me know and I’ll talk your ears off.
Have now implemented Ron’s latest code. All good on desktop. Problem persists on mobiles. Latest screenshots on dropbox…
https://www.dropbox.com/s/r1m4jvmptv4es1e/Latest%20Screenshots.zip
I understand most of it, its just the before/after stuff…
New post being moderated with links to latest screenshots
The version on your site does not have the viewport tag added. Please download a new copy of the HTML file(s) from the dropbox and let’s try again.
-OR-
Add the following line to the truvotes.htm page here:
<head>
<meta charset="iso-8859-1">
[color="blue"]<meta name="viewport" content="width=device-width, initial-scale=1.0">[/color]
<!--
Then let’s see how the mobiles behave.
Have now added the Meta Viewport tag…
How do the seal and text behave in your mobile devices with the viewport tag in place?
The seal is no different on either device, however on the the phone the navbar is bigger, and wraps the last menu item. The text is more readable on the phone. Will send some more screenshots…
Yikes. Instead of too low, now the seal is waaay too high. The percent margins are not being honored in your mobiles as they are in the desktops. My Galaxy Note looks like the desktop view.
Thinking…
Ron, When I was learning about CSS (still am, but I mean on the other site) I did a lot of reading as to why various browsers render things differently. There were many different views on this, and most people put it down to the browsers themselves. And I feel that, that, is partially the problem. Mainly browsers either recognise or don’t recognise various CSS or HTML commands. In the end I figured out that it may have something to do with screen resolution. Now before you laugh, and dismiss that outright I might point out this. On the other site I have a Meta tag that says if a viewport is under so many pixels, redirect to a different CSS and index.html. Now that works fine providing that the mobile device is NOT hi-res (It’s why I asked about the res on your Galaxy). On your Galaxy, you are basically seeing the same as on a desktop, which is why your view doesn’t react the same as mine. And the same with the other guy and his later iPhone.
Let’s consider this, your Galaxy has a screen size of about 5.5inches if I remember correctly, and yet has a resolution of (whatever you told me yesterday), and my iPhone has a 4inch (approx) screen, but at a much lower res. My Android has a 10inch screen at about the same res as my iPhone.
On the other site, the iPhone gets redirected to the mobi CSS, and gets the mobile index.html. Whereas the Android stays with the normal site.
I think it all comes down to pixel size. There are many more pixels on your Galaxy than on my iPhone but at a not too great inch size difference.
This is my theory that position relative, will solve the problem of the seal. In fact I had it working correctly last night before I buggared everything up.
Anyway may I suggest trying pos: rel?
Hi,
The answer will certainly have nothing to do with postion:relative as such but it may be that when you used it you changed some other properties that were affecting this. If you were positioning using percentages or margins then you could find that things were changed because your point of reference has changed and originally it only happened to match.
Regarding screen resolution then you are thinking too much about this and all you need to do is think about layout width. Devices determine the optimum resolution for their devices so that they can show their displays as best they think fit. They may map to double density pixels or whatever but in essence you don’t need to know much about this (apart from hi res images which is another subject but still doesn’t affect the display layout as such). All you need to cater for is a layout that fits in a viewport from small to large and you can do this by working in your desktop most of the time.
There will be be some bugs and discrepancies between mobile devices but most of the newer models are pretty consistent these days.
However, you need to adjust the display at smaller sizes so that it fits better and is easier to use on mobile. Take your nav for example which will wrap to another line at smaller windows and what you should be doing is deciding that foe smaller screenshots each menu item will be full width so that a) It is easier to select with a great big thumb or finger on a mobile and b) it looks neater having 4 in a row rather than wrapping. This can be done easily by cancelling the float and setting the display of the element to block and allow it to stretch to full width.
I will have a look at your code later and see if I can spot why the seal is misplaced as I don’t have an iphone to test with until my wife comes back and the mac emulator is showing no problems (and I’m guessing that the real iphone will be the same as the mac emulator is 99.9% accurate but of course refers to latest devices).
I apologize for not responding shortly after you posted. Normally, I receive an e-mail notice when someone posts in a thread where I have posted, but I did not receive a notice about your post. Such missing notifications is another long-standing vBulletin bug that has plagued many of us. I seemed to have been immune to that bug… until now.
#banner contains a foreground image and is pos:rel. Changing #seal_2_certificate_image from pos:abs to pos:rel will break the dynamics of the banner and seal and more.
Last night, I added a wrapper around #seal_2_certificate_image (and made the appropriate CSS changes) and was able to get the image to scale correctly in IE8, but of course resizing wasn’t the problem :-/, position is. Nevertheless, it could be something as simple as that that will fix the page for all devices. I can’t tell, though. Paul and Ralph have the most experience with mobile devices and should be able to determine where the problem is located and if it’s my code, fix it.
Let’s give Paul a chance to examine the code live before altering anything.
[ot]
The post (#32) was auto-modded, which may be why no notification was sent.[/ot]
Ahh. Tanks, TB.
Hi,
Try this for the seal image instead.
#seal_2_certificate_image {
width:15%;
max-width:132px;
height:auto;
position:absolute;
left:3%;
top:46%;
cursor:pointer;
}
(The above replaces your same named rules and uses top and left instead of margin top and left. Percentage top margin is based on the width of the element whereas a percentage top is based on the height of the element (and although the padding-bottom approach should create a consistent approach I believe the use of :after to add the padding is causing the problem when calculating percentages)).
The above code works on the iphone 4 (real phone) (and the iphone 5 emulator).
I would then change the nav on small devices with a media query.
@media screen and (max-width:500px ){
#nav{display:table;width:100%;line-height:normal;min-height:0;}
#nav li { float:none;display:table-cell; border-right:1px solid #fff;}
#nav li:last-child{border:none}
#nav li a {border-right:none; padding:8px 0;text-align:center}
}
Those rules should follow after the original nav rules of course.
Hi, Mike.
I added Paul’s changes to the code and put a copy in your dropbox. I think you will like Paul’s treatment of the menu below 500px . Give the code a test and hopefully we can move forward from here.
https://www.dropbox.com/sh/8q11fzqlc5t08g8/AACpFUQQvJPTQNUIPKLBuOt2a
Cheers
Ron, Have downloaded and looked at 3g, and can see the changes to #seal_2_certificate_image, but where did you put Paul’s @media code? I cannot see it anywhere.
Woo Hoo!!! The seal is now rendering correctly on all devices…
Ron. could you explain to me what the code actually means and does? I have not come across it before.