|
HTML - Image Issues With Mobile Viewing
Hi there I'm new to this site but think I'll be sticking around for the wealth of information here.
So...I recently designed a website for a friend working off a nice little template to save time. Everything looks great and operates exactly how they requested on a desktop browser. However, the images become vertically stretched when viewing on a mobile device pretty severely. I'm confused because it's only the photos, other graphics (also jpegs) do not become distorted. Is it because I used width="x%" and height="x%" in the image tags www.rideums.com is the website if you'd like to take a look at the source. Thanks guys for helping out. Similar TutorialsHi everyone, This is my first post. So allow me to introduce my self. My name is Adam. I have seven years of comprehensive experience in the Tech industry primarily focused on help desk solutions. Presently building a web-page using Net Objects Fusion 9. When I view the site on Internet Explorer everything is normal. When the page is viewed in Mozilla Fire Fox, you can notice that all the image displays are in different placements the text is all over the place... thevillasatpaugusbay.com/norrisv/ Can anyone offer a kind and helping hand to me? I'd hate to have redesign everything!! Thank you for taking the time to read my post. Even if you cannot offer any help or your help didn't resolve my issue. I do want you to know I appreciate it! Hi All, I was hoping for some help in finding some Beta participants out there who would be interested in trying out our new service. We have just launched in Beta mode. (its free to use). There will also be a free version after the official launch. The first step is to browse your way over to: http://www.handsetdetection.com/ We hope that this will represent one of the first steps in solving the mobile and web crossover issues which website owners and developers face when people view the site from any device other than a normal computer (I-phone / Balckberry / PDA). Once connected to our service, when someone visits your site, a live request is sent to us, and we return a result back to you on a live basis with details of the device, screen size, GEOIP, make, model and many other fields of information. From that point, you can do one of two things: 1. Depending on the result returned, you can then display an appropriate view for the consumer i.e. A website that will fit their device's screen size and UI which is controlled by the way in which they are browsing (i-phones suit touch screen menus, N95's suit joystick controls and so on...) 2. If option 1 is too much of a first leap, after you add the code into your website, you can just login to our online reporting system and view your traffic results based on device make, model, country, city etc... This would be a great first step in understanding whether you are getting traffic to your site from non traditional browsing devices. As I mentioned, we are in Beta stage, so we would value your feedback on this. Also, if you know of anyone else who may be interested in participating in this Beta stage, I would be grateful if you could pass this message on... Regards, David Manjra skype: dmanjra So I have code that opens a file input dialog box where a person can pick an image to upload. Once an image is selected, I want the image to appear on the web page. The problem is, I dont know how to show the image, because the source is unknown. After the user selects the image from the dialog box, is there any way to show it? <input type="file" name="diagram" size="40"> <img src=( what do I put here to show the image that was selected ) align="right" style="padding-right:10px" alt="dataFlowDiagram" /> Hi everyone. I am having a problem with a image within a table. The image within the table displays fine in FIREFOX, where in IE, the image does not appear. There is no red x, just the image does not appear. Any ideas? i tried searching the forums for this problem, no luck on my end. Unless i suck at searching Quote: <table width="1000" height="30" border="1"> <tr background="RightSide.jpg"> <th width="200" height="25" scope="row"><span class="style11">Link 1 </span></th> <td width="200" height="25"><div align="center" class="style11"><strong>Link 2</strong> </div></td> <td width="200"><div align="center" class="style11"><strong>Link 3 </strong></div></td> <td width="200"><div align="center" class="style11"><strong>Link 4 </strong></div></td> <td width="200"><div align="center" class="style11"><strong>Link 5 </strong></div></td> </tr> </table> This is the table and image So I'm not completely new to html website design, but I am building a site and was just going to throw up a banner and some text saying coming soon. So the text displays fine. But I cannot for the life of me figure out how to get the images to display. I have checked and double checked the source code and it should be fine. I manually logged into my ftp and the file is in the directory so it shouldn't be an issue of not being able to find it. Can I get any help at all? Here is the link: http://www.huntlink.net my code is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <table width="800" border="0" align="center"> <tr> <td><img src="images/mainbanner.png" width="800" height="150" /></td> </tr> <tr> <td align="center"><h2>Coming Soon!</h2></td> </tr> </table> </body> </html> Any help would be great. I don't know why the image isn't displaying. It works when I preview it in dreamweaver also. I recently created this website to highlight a trip to New Orleans. I did something similar for a trip last summer to Africa. As you can see, the pages are designed with small image icons, and you must click on the icons in order to see a popup of the full image. However, when viewing the page on monitors with lower resolutions, some of the images create a flickering effect and prevent the viewer from seeing the larger popup image. Does anyone have any recommendations? Ideally, I'd like to find a solution that doesn't require me to resize the images. After all, they're not that big. If someone can offer a particularly good solution I'd be willing to compensate you for your time, since I intend to create numerous more travel pages like these. Thanks! I am not an amatuer, I'd think, but for some reason I am having trouble slicing up this image into a site (http://www.pigseldesign.com/tartan_mod.jpg). The top menu is the problem area, but I think my trouble comes into play due to me using tables. I haven't really delved into DIV tags yet to understand how to make it work in that form, but it doesn't seem like it would be difficult. I've just split the image into four columns and the menu falls into the 3rd. Problem is, when I make the cell's background the black/gray gradient, it spans to match the height of the patterned banner on the left (in another cell), even after I set the menu's cell's height to what it should be. I know there isn't much concrete information to work with, but any help would be greatly appreciated. Even if there were a program where I could just slap this in and have it spit out what I need. I just want the code clean, correct and looking right. Hi, I have a table with a background image. i want that this background image adjust itself dynamically according to the size of the table. Can this be achieved. can anyone post any technique of doing this? Thanks in advance geniuses htmlgroom Hi Friends, I've created an html coded email signature for Outlook 2003 (old, i know) and need some help. I've inserted a few images and linked them back to my company's social media platforms. When I insert the html template into Outlook it places <> after each picture/icon that i inserted. Any suggestions on how to remove these?! i finally figured out how to remove the underline but now i'm stuck with <> and can't get it to go away! PLEASE HELP!!! I am not the most technically inclined, so the wording may be iffy ... but I noticed that when I use a table to align images (like jpegs or gifs), my webpages get skewed only when I view them in Windows internet explorer 8 (things seem to be okay in Mozilla, Safari, Chrome, etc etc) ... anyone know why? here is an example: I put an image with a width="32" and a height="29" into a 'TD' tag (data for table) that is also designated a dimension of 32 by 29 pixels ... for some reason in explorer the images skew the table and distort my webpage. note: I set in the table tag: cellpadding = 0 cellspacing =0 border=0 ALSO i set inside the img src tag a 'border=0' to be safe look at the following example (in explorer 8 then the other browsers that seem to work): http://missko.shacknet.nu/cityofrose...bleexample.htm .. in the first (very small) image to the left you can see a green background color just below the image (only in Windows internet explorer 8) meaning it did not fit within the 'table data' boundaries for that particular table. i hope this makes ANY sense .. this is driving me CRAZY! it is happening with ALL my stuff .. i have a feeling there is no way around this. any ideas? thanks. I'm having trouble with some browsers opening my website. Some people go to the homepage and just see a blank page with the contact details at the bottom. I know the website isn't the most fancy in the world, but it's my first and does the job for now. I can view it fine. Does anyone have any ideas as to what could be wrong and how it could be fixed? My website is www.lagganoutdoor.co.uk Hope you can help. Many thanks in advance. Duncan. Hey everyone Ive been working on a website for my company for some time now and Coothead has been able to help me with most everything I need Only problem is now when I go to work to view the website on a PC running Windows XP SP3 and IE 8 the dropdown menu links don't function proporly. Im not sure if its my CSS or my PHP Includes, or maybe something else hehe. my website is www.k2digitalinc.com and if it looks fine on your browser then this is a pic of what it looks on on XP IE 8 http://free.hostultra.com/~k2digitalinc/website.JPG When i hover over a link it appears below the next with no background and its impossible to click the link. Ill post my entire website script and images below, any help appreciated. I dont really understand CSS but I think its proboly a problem with the default.css file, because coothead already helped me with my php includes, so I trust he did it right Any help appreciated. Thanks. I test all of my pages on all of the most popular browsers. I believe that you can only have one version of IE installed per user account. I have IE6 running on one PC, and IE7 on another PC. Once IE8 becomes popular, I will test my pages on that too. Q. Can I have multiple versions of IE available on a single Windows XP PC? Do I need three PCs to run IE6-7-8? Q. How are you guys addressing this problem? hi this is my 1st post and i am so desperate needing help i recently did a website.. the site is viewing fine in Mac safari, windows opera and firefox.. but when comes to IE, the table is in a mess.. can someone help me? i can upload the file if possible.. below is the pictures. Opera: IE: I am a beginner! (I thought I would warn you.) Can someone here please tell me how to do the code for being able to see how many viewers are online at a particular site. For instance so all shoppers can see how many people are shopping in that store at the same time? I hope that makes sense. Many thanks in advance!! Hey, I've downloaded a template to use for my webpage and i changed up the width of the middle section (in grey) within the css, it views perfectly in mozilla, but when viewed in IE it's as if i didn't widen the width of the middle section at all and as a result the text and images i have put in the area are compacted. Does anyone have any ideas of how i can get IE to view my site the same as mozilla is? Mozilla is displaying the site as i want it too look. The text is more spread out wthin the grey area. http://www.revolutionct.com.au/boot_camp_canberra.html Appreciate any help! Thanks. i need the code in html when any one opens my website in mozilla firefox the user is prompted to view the website in INTERNET Explorer . while if the user opens the website in IE he is not prompted to any action. and the action required may be in pop up form or attention message form. please help me put as soon as possible. and the code must work for any browser because i need my website to be viewed in IE only. can go through the URL ... please view it in IE and firefox there is a difference is spacing the table if u can fix this or can make the prompting it will be fine http://ims-sc.org/SPORTS/members.html Hi all, I'm a technical author based in the UK, but I've got a problem with an online help system I'm producing - I hope you can help, I've been pulling my hair out for days trying to find a solution to this! My problem is with the security update courtesy of Microsoft and the "Page not displayed" problems it causes. The container and TOC produce fine, but the right pane shows the error. Now, my chm has to be stored on a network and will be viewed by over 500 people on terminals, so I'm unable to load anything onto any local drives, so I can't do the "Unblock" security fix. None of the users will have admin privileges and bearing in mind there are so many machines, I'm also unable to change the registry settings on the machines, so this rules out fix number two. I wonder, is there any code that could be put into the chm itself to confirm it as a valid file, and thus open directly from the network without having to modify each individual pc? Or indeed would anyone know of a script that could be run from the network to update everyone's machines all at once? If none of these work, I guess I'm reduced to producing plain HTML files, but I'm hoping I can find a workaround as I particularly like the TOC/index/search facilities of HTML help, and the fact I only have to ship a couple of files. I do hope you can help, thanks in advance, Tixuk Hi: I'm having problems with IE viewing my site. Unfortunately a lot of my viewers still use IE, but the way the design was made (Open Source design), the right side is in the first part of the file (<div id="content">) and the left side is afterwards (<div id="left">). It was working fine in IE for a while but then just suddenly stopped working after I was editing. Not sure what I did. Site demo: www.neptuneware.com Username: gametest Password: penguins When prompted. Could anyone please look at it in IE and tell me why it's not working. All HTML is in the source code (nothing's hidden), but here is the CSS file: Code: /*
** BLUE:SKY - main stylesheet
** This CSS file makes the webpage look pretty ;-)
**
** March 5, 2006 - (version 1.0)
**
** this is a part of the open source layout by
** Jonas John (www.jonasjohn.de) ~ made for gameindicator.com
** GAMEINDICATOR.COM using OPEN SOURCE WEB DESIGN (OSWD.ORG)
** GameIndicator thanks OSWD and Jonas John for our website design.
*/
/* page overall: bg used to be a5ddf8 */
html * {
margin: 0;
padding: 0;
border: 0;
}
body {
margin: 0.5em 0em 2em 0em;
font-size: 100%;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
line-height: 1.1em;
text-align: center;
background-color: #fff;
background-image: url(../images/background.png);
background-repeat: repeat-x;
}
#page {
width: 1000px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
/* header: */
#header {
position: relative;
width: 100%;
height: 2.8em;
color: #fff;
vertical-align: middle;
text-align: left;
}
#header a:link, #header a:visited {
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
font-weight: bold;
font-size: 1.9em;
letter-spacing: -0.1em !important;
letter-spacing: -0.2em;
line-height: 1.2em;
}
/* left column: */
#left {
width: 24%;
float: left;
position: relative;
font-size: 0.8em;
}
/* DIV NAV EXTRA
** border-right: 0.18em solid #4284B5;
** border-bottom: 0.16em solid #4284B5;
*/
div#nav {
background-color: #fff;
width: 90%;
border: 1px solid #555555;
}
#nav ul {
list-style-type: none;
padding: 0.5em 0em 0.9em 0em;
}
#nav ul li {
padding: 0.03em 0em 0.03em 0.9em;
margin-right: 0.3em;
}
#nav a:link, #nav a:visited {
color: #2E668B;
}
#nav a:hover, #nav a:active {
color: #000;
}
/* LEFT BOX EXTRA
** border-right: 0.18em solid #4284B5;
** border-bottom: 0.16em solid #4284B5;
*/
div.left_box {
background-color: #fff;
width: 90%;
margin-top: 1em;
border: 1px solid #555555;
}
/* LEFT BOX AND NAV H3 EXTRA
** border-top: 0.1em solid #65B6E3;
** border-left: 0.1em solid #65B6E3;
*/
div.left_box h3, div#nav h3 {
margin: 0em;
padding: 0.2em 0em 0.2em 1em;
font-size: 0.8em;
color: #fff;
background-color: #4284B5;
text-transform: uppercase;
font-family: Verdana, Arial, sans-serif;
border-bottom: 1px solid #555555;
}
div.left_box p {
margin: 0em;
padding: 1em 1em 1em 1em;
}
div.left_box a:link {
color: #2E668B;
}
div.left_box a:visited {
color: #254A65;
}
div.left_box a:hover, div.left_box a:active {
color: #000;
}
/* innerbox
** border-right: 0.15em solid #7BA5C6;
** border-bottom: 0.15em solid #7BA5C6;
*/
div.inner_box {
}
/* content column: */
/* CONTENT EXTRA
** border-right: 0.2em solid #4284B5;
** border-bottom: 0.2em solid #4284B5;
*/
#content {
float: right;
display: inline;
position: relative;
width: 75%;
font-size: 0.75em;
border: 1px solid #555555;
background-color: #fff;
}
#content h1 {
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.5em 0em 0em 0.1em;
font-size: 1.7em;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #FF6300;
border-bottom: 0.05em solid #FF9853;
line-height: 1em;
}
#content p {
margin: 0em 0em 0.5em 0em;
padding: 0.35em;
}
/* PATH EXTRA | border-right: 0.23em solid #7BA5C6; */
#path {
font-family: Verdana, Arial, sans-serif;
margin: 0em 0em 0em 0em;
padding: 0.4em 0.6em 0.4em 0.6em;
font-size: 0.9em;
color: #2F5E80;
background-color: #D0E7F4;
border-bottom: 1px solid #555555;
}
#content a:link {
color: #2E668B;
}
#content a:visited {
color: #255270;
}
#content a:hover, #content a:active {
color: #000;
}
#content acronym {
border-bottom: 1px dotted #4284B5;
cursor: help;
margin: 0;
padding: 0;
}
/* MAIN EXTRA
** border-bottom: 0.2em solid #7BA5C6;
** border-right: 0.2em solid #7BA5C6;
*/
#main {
padding: 0.5em 1.5em 1.5em 0.7em;
}
div.img_left, div.img_right {
border-bottom: 0.09em solid #4284B5;
border-right: 0.1em solid #4284B5;
}
div.img_left {
float: left;
margin: 0.5em 0.8em 0em 0em;
}
div.img_right {
float: right;
margin: 0.5em 0em 0em 0.8em;
}
div.img_left img, div.img_right img {
display: block;
border: 0.35em solid #7BA5C6;
margin: 0;
padding: 0;
}
/* this clears floating (e.g images) */
br.clear {
clear: both;
display: none;
}
/* footer: Margin (no spec side) used to be 0em, EXTRA padding: 0em; */
#footer {
font-size: 0.6em;
clear: both;
color: #027BC1;
text-align: right;
}
#footer p {
margin: 0em;
padding: 0.1em;
}
#footer a:link, #footer a:visited {
color: #027BC1;
}
#footer a:hover, #footer a:active {
color: #000000;
}
|
|||||||