looks terrible on Droid

Hello

I am new to CSS and have a page which looks pretty good on Firefox, Safari, Explorer, Chrome, ipad and iphone:

http://www.demilodesign.com/assets/CSS/test_slider.html

Looks terrible on the Droid. None of the background colors, images don't float, etc. It's like the droid browser does not recognize css at all except that other sites css air well. Clearly, I have a lot to learn. Here is the CSS for the part of the body. Thanks a lot for the suggestions.

.bodyContainer

{

background-color: #ffffff;

Max-width: 934px;

margin: 0 auto;

padding: 0;

position: relative;

top: 60px banner;

border: 0px solid black;

}

.logo

{

background-color: #F6FDDB;

Width: 100%;

height: 46px;

border-bottom-style: solid;

border-bottom-color: #cccc66;

border-bottom-width: 1px;

text-align: center;

position: relative;

Top: 0px;

padding-top: 11px;

padding-bottom: 12px;

}

.footContainer

{

background-color: #F6FDDB;

border-top-style: solid;

border-bottom-color: #cccc66;

border-top-width: 30px;

position: relative;

Width: 100%;

height: 70px;

top: 80px;

bottom: 0;

left: 0;

right: 0;

text-align: center;

border: 0px solid red;

}

.navIconBox

{background-color: #ffffcc;}

Width: 6px;

height: 6px;

padding: 0;

margin: 0;

border-style: solid;

border-color: #999900;

border-left-width: 1px;

border-right-width: 1px;

border-top-width: 0px;

border-bottom-width: 0px;

position: absolute;

top:-11px;

left: 35%;

left margin: auto;

margin-right: auto;

z-index: 1;

}

.navMenuItem

{

position: relative;

top: 7px;

text-align: center;

color: #cccc66;

padding-right: 10px;

/ * police: 0.7em / Verdana, Arial, Helvetica, without serif 20px; * /

}

.navContainer

{

Width: 100%;

margin: 0 auto;

padding: 0;

position: relative;

Top: 0px;

text-align: center;

}

.navIconBar

{

background-color: #ffffff;

Width: 100%;

height: 6px;

border-bottom-style: solid;

border-bottom-color: #cccc66;

border-bottom-width: 1px;

top: 200px;

}

.navSubContainer

{

Width: 100%;

margin: 0 auto;

padding: 0;

position: relative;

top: 20px;

text-align: center;

color: #ff9966;

border-top-style: dashed;

border-top-width: 1px;

border-bottom-color: #cccc66;

z-index: 2;

/ * police: 0.7em / Verdana, Arial, Helvetica, without serif 20px; * /

}

{.contactCart}

position: relative;

Max-width: 934px;

margin: 0 auto;

/ * float: right; * /

padding: 0px;

padding-right: 10px;

text-align: right;

padding-top: 40px;

border: 0px solid black;

}

{.catalogThumbs}

position: relative;

display: inline-block;

Width: 118px;

height: 118px;

text-align: center;

vertical-align: top;

border: 1px solid #666666;

make-weight: bold;

margin-bottom: 30px;

right margin: 5px;

margin-left: 5px;

}

{.catalogFeatureImage}

position: absolute;

top: 50;

right: 300;

display: inline-block;

float: right;

padding-top: 5px;

Width: 522px;

height: 312px;

text-align: right;

vertical-align: middle;

border: 1px solid #cccc66;

margin-bottom: 5px;

left margin: 0px;

right margin: 5px;

background-color: #F6FDDB;

}

{.catalogDetailImage}

position: relative;

display: inline-block;

float: right;

padding-top: 5px;

Width: 600px;

height: 400px;

text-align: right;

vertical-align: middle;

border: 1px solid #cccc66;

margin-bottom: 5px;

left margin: 0px;

right margin: 5px;

background-color: #F6FDDB;

}

{.catalogHead}

position: relative;

display: inline-block;

text-align: right;

border: 0px solid #cccc66;

margin-bottom: 5px;

margin-left: 5px;

right margin: 5px;

border: 0px solid #cccc66;

height: 175px;

Width: 388px;

}

{.catalogDetailHead}

position: relative;

display: inline-block;

text-align: right;

margin-bottom: 5px;

margin-left: 5px;

right margin: 5px;

border: 0px solid #cccc66;

height: 400px;

Width: 345px;

}

{.catalogHeadText}

do-size: 14px;

make-style: normal;

make-weight: bold;

do-family: "Times New Roman", Times, serif;

letter-spacing: 0.1em;

color: #ff9966;

}

Your menu is a mess in all browsers, BTW.  See screenshot of FF23 with text increased.  It is unusable.

Positioning is the biggest single problem you have.  If you want a sensitive provision that works well in all devices, get rid of positioning.   Learn how to make better use of the floats and margins.  Or find a system of menus like this one (resize viewport to see how it works).

http://Foundation.ZURB.com/page-templates4/store.html

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Fonts look terrible after update KB3013455, 11 February 2015

    Once Windows installed security update KB3013455, all my fonts on Firefox look terrible.  I uninstalled it and everything is back to the way it was supposed to be.  Microsoft will fix this? I hate being without a security update.

    You can read (and publish in) this thread: KB3013455 (MS15-010) causes the police corruption

  • My docs to Word that I converted in PDF used to be beautiful - now they look terrible.  The resolution is very bad and the type is difficult to read.

    The resolution on my PDF documents looks terrible.  The fonts are hard to read and have very low resolution.  That's happened?  I downloaded the most recent Adobe Reader because someone sent me a document to sign and he said: I needed the latest version, but everything changed when I downloaded this new version.  How can we get the old version or is there some secret to have my PDFs look away, they used to using the new version?

    I do a lot of training and use PDF MUCH files and these documents really look bad now.  Can you help me?  Do I have to download a previous version? How can I do?

    Note that this answer is ONLY a WORKAROUND for a very serious problem.  The real problem is that the latest version of Adobe Reader is unusable.  So I start a new thread with the title "the latest version of Adobe Reader is unusable".

    I use a desktop Windows 7 computer, and I had the same problem.  Yesterday I updated my Adobe Reader software, and all PDFs look absolutely atrocious with the new player - in the same way that you describe.  My eyes water when I try to read them!  It's not the files - it is the new player, because they are all files that were perfect with the old version.

    I am a professional computer, so instead of panic (the new version is completely unusable!) I searched on the website of Adobe and found a way to download the installation for earlier versions files. Try this link - it could still be good:

    https://get.Adobe.com/reader/otherversions/

    Select the options that you need (operating system, version, language) and give it a go.

    You will need to uninstall your current version (use Control Panel configuration/programs and features), because the installer will not install an older version over a newer version.

    I am running Adobe Reader X version 10.1.4 and it works very well.  God help us all when we are forced to update a day due to problems of compatibility with future versions of pdf!

  • Text looks terrible in Acrobat MS Windows 10

    I recently installed Creative cloud including Acrobat DC on Windows 10. When I view a PDF file on the screen, the text looks terrible. It is pixelated and one alias. Text seems also thinner than it should be. Meanwhile, the borders are pronounced slightly more than they were in Word. Images don't look like much either. I looked around a framework of anti-aliasing, but cannot locate one. I have attached a picture for comparison. (Not sure if it will let you see full-size however).

    Acrobat.png

    So, is it just an easy setting I can fix it, I'm missing? PDF files used to look great in DC on Windows 7. So is this a problem of Windows 10?

    Thank you.

    Hi PaulFAubin,

    Could you please open the file > properties > fonts and check to see if the fonts are included.

    Open "Edit > Preferences > Page display" and see the text smooth for laptop screens / LCD is selected.

    Kind regards

    Ana Maria

  • Print settings Photoshop - what to use - pictures look terrible.

    I don't know what I did but when I go to print a photo print Photoshop pop up settings.  What is the best - printer manages color or Photoshop?  I don't know how to change my profile to the printer.  I find HP for more than 3 hours.  I have an Officejet Pro 8600 and can't seem to find anywhere to change.  The profile settings of the printer is printing the photoshop: sRGB IEC61966 - 2.1.  Under color management - please use that adobe Color Printer Utility If you need to print with color No. Management - also did not work.  I do more it gets worse.  Prints for example arm showed dark spots.  Looks terrible. I have an iMac and uses the settings of the iMac in my color profile in preferences.  Any ideas?

    Print open, hold Opt and cancel it for printing will become a reset. First use. Then make sure that "printer manage colors" is selected. Finally, make sure that you use the HP paper designed for your printer and that you have selected the type of paper in the print settings. Otherwise, you will need to use a standard to make a custom profile for the printer and paper combination. One last thing to add, if your computer monitor is not calibrated, the color will not look the same on paper, no matter what you do.

    Benjamin

  • Any PNG made in Illustrator looks terrible in AE

    Hello

    I made a PNG image to the size of my video 1920 x 1080 registered for the web and devices in Illustrator and when I import it into AE graphics look terrible.

    The same PNG imported first seems perfect.

    What can be the reason?

    Thank you! David

    Save it as a document in eps or illustrator to AE.

  • Display flash by XML = display quality .jpeg image looks terrible

    Hello-

    I display an image .jpg in xml in Flash. The problem is the quality looks terrible image (pixelated and unreadable text) output. The image is of 72 dots per inch at 1150px X 750px. Display movie clip area is also 1150px X 750px. Y at - it advice or settings I could be missing to display this image in better quality?

    Thank you

    Next, you will need to use the smoothing of bitmaps property.

  • Beautiful images high resolution in photoshop look looking terribly pixelated when scaled down in movement 5... How can I avoid this?

    I'm working on a project with a customer logo and title... both are downloaded from the internet in high resolution and crisp and wonderful look in Photoshop. However, when I drop in my 1, 080 x 1, 080 5 movement project and adapts them to the size, they must be in animation, all this freshness becomes terribly pixelated.

    It looks like a problem of aliasing to me... the text generated by movement in my document looks great, so I guess that's not a draft too low resolution (1, 080 x 1, 080 seems high enough resolution for me!). I'm fairly new to Motion, so I feel like there's just something obvious that I forget... any help is appreciated!

    If the logos are available on the internet, please post a link to one or more of them, then we can see what the issue might be. The only way (in general) occurs in images pixelation is if the scale becomes higher than 100%. Which can happen even if you are down, but with the help of a camera view revision or position Z to make the image appear closer.

    Is there something else on the project involving a zoom, positioning, and/or put across?

  • Place the photos high resolution in InDesign - look terrible when I resize down! Does not work why!

    I'm a beginner with InDesign, so I'm looking for very clear instructions. I work with CS6 on a ballot. When I place very large, high resolution photos in and then try to resize the terrible resolution looks down.  I use the tool place during the import. At first I thought it was because I use the 'content to the chassis Fit' tool and who had settled the proportions. So I tried to "Adjust the frame proportionally" and who did not, any more than "automatic adjustment". I have tried to place photos and then making a control + drag to resize down - it did not work. I looked at preferences - file handling - preserve Image Dimensions (I deselected that option). Also, did not work. I wonder if the resizing affects pixels, but I don't know where to find it in InDesign. I found the instructions for Photoshop on the choice of Image - resize the Image, but not in InDesign. The other thing, on what I am wondering is that I put these pictures in a text box - which could cause problems with the resolution? Should I be placing them another way?

    Any advice would be appreciated with gratitude!

    You should always use one of the options adjustment proportional to avoid distortion. This may mean that you need to change the shape of the image frame allows you to adapt the shape of the image, or crop the image to take into account the shape of the frame. It is a reality.

    I'm starting to think that some or all the original problem may be in the jpeg compression, and I doubt that Pixillion Image Convertor is a good choice for downsampling (which isn't the same thing as compression). You can post one of these pictures somewhere for us to watch?

  • Graphics WMF look Terrible after the re-opening of InDesign file

    I hope someone can provide the answer to this one, or at least a decent work around.

    Very detailed drawings are provided for me (the author of technology) in the form of graphics of Windows Meta file (*.wmf).

    I have to take these designs and import them into my files InDesign V.6 (CS4) using the command set under file.

    The graphics look good immediately after I import them. If I print the file in PDF (Adobe 9.0) before closing the file, they look in PDF as well.

    The problem: if I close the file and then reopen it, the schematic graphics look absolutely terrible. as they have 'removed' or something. The number of labels is completely indistinguishable and rasterized. Print to PDF does not improve the aspect (but does not seem to make it worse, if that's even possible).

    So, the problem lies between the time wherever I finish (after registration) of the file and the time I re - open. ID is to reduce the graphic quality of these WMF drawings on save/close the file and I can't find the solution.

    Technical details:

    System: PC, Windows XP Professional, Version 2002, Service Pack 2

    Adobe CS4: InDesign Version 6.04

    Thank you for your time and your attention. I will be happy to provide more details to get the answer to this question.

    -WPH

    You can embed PDF files in ID files without damaging the file at all. Go ahead and try and then look at the PDF file.

    There is no way to tell which content was a part of the PDF and who was content ID native.

    Check your setting to view under view > display performance.

    Bob

  • have problems with hardware acceleration of rendering: fonts looks terrible

    have problems with hardware acceleration of rendering (integrated gpu: amd 760 g) of one of the latest nightly updates - police seem terrible http://i.imgur.com/kWnySVv.png

    Note that the gfx.content.azure.enabled pref has more effect and you can try to disable Direct2D by setting the pref gfx.direct2d.disabled true on the subject: config page and leave hardware acceleration enabled otherwise.

    See also commentary 414 in bug 812695:

    This way you still have the advantage of hardware acceleration, but can not suffer rendering problems.

  • My Acrobat interface looks terribly pixelated in my macbook pro retina, how do I fix?

    Photoshop, illustrator, lightroom, etc., everything seems perfect is just my Acrobat that horrible looking, is there a way to fix it? I've updated, but nothing happened. You can see the difference in sharpness of the image.Screen Shot 2016-01-22 at 10.46.10 AM.png

    Another discussion pixelated interface and pdf acrobat pro xi on the retina 2013

  • Colors and photo look terrible quality when set as wallpaper and after emailing, help?

    Hello world!

    so I recently had a problem, I think that it is possible to do with the way my pictures are saved.
    I recently had to wipe my computer and support everything on a hard drive, so I had to re install photoshop. Since the wipe I had some problems with the way my photos look when I have them set as bottom of screen or when I send an email the colors in the pictures appear very dirty and washed out and the quality seems worse as well but who could appear just like that because the photo is already so horrible. When I discovered photos in my photo gallery in my documents they look very well,

    they look good in photoshop and they appear normally when I transfer them to Web sites, the problem only seems to occur when I email them and when I set them as the background.

    tilly photo error.jpg

    Here is an example of one of my photos, the background image is the good image of high quality with the colours displayed correctly. Above is what happens to the image when I put it as my background or when I send by e-mail. This would be a matter of CMYK? I thought that I double checked and all my settings were correct, but at this point I'm pretty frustrated


    Does anyone have an idea what is happening here?

    Thank you!

    Hi emmav,

    It seems to be a problem due to the change of color space.

    It seems that Photoshop working on ProPhoto RGB, and after saving the image, the color space is defined as sRGB.

    Suggest you follow these steps in Photoshop.

    1. open the image in Photoshop

    2. go in the Edit > convert to profile > change the Destination space to sRGB > click OK

    3. save the image and try to download on mail, or set as background.

    Kind regards

    Claes

  • Set to update to Windows 10 and now Acrobat looks terrible

    B4 I start, the forum said: 'Acrobat Installation & update questions' but once I click on it it says, it is only for "installation and update of the issues". My question is not on the installation/update, but it is a problem of installation of a sort. In addition to the fact that no other forum here is so I have no choice but to ask my question here. I hope I'm not mistaken.

    I just upgraded to Windows 10 and PDFs look awful - this is the case for my Adobe Acrobat CS 6 Pro and Adobe Acrobat Reader DC. Please note that I have no other problem of reading software on another text (or images) and that the same pdf reads fine in my browser. can anyone help? (well this forum reads gray rather than black, but maybe it's a setting I have somewhere I would guess, if it is please let me know this as well.)

    Thank you

    Hello

    I had a similar problem where the fonts showed very pixelated, after that I have upgraded to Windows 10.  For some reason any text 'smooth' set default to 'None' (Preferences > Page Display > rendering > smooth text)-I've now changed this setting to "Monitor" and it seems to have solved this problem...

    You're not sure if it's the same problem that you have experienced, but may be useful to check your Page display preferences?

  • After the CC update, RAW files are re treatment and look terrible!

    Anyone else having this problem? My RAW files are re treatment and have a very flat, foggy look to them. Not happy! There seems to be something with the Camera RAW update to 9.1. Can revert you to a previous version?

    The answer is here:

    Adobe Photoshop Lightroom Help | Display pictures of Nikon D810 with different colors in Lightroom and Camera Raw 9.1 6.1

    Bob Frost

Maybe you are looking for

  • What does "HTTP 400 error. The request is malformed. "mean?

    Typed a web address and get above message. Another Member of the family using Firefox but does not get this error when you enter the same address. Tried to restart with disabled modules, but did not.

  • cannot open the https sites

    Hello I can't open any websites other than https for about a week. I use chrome and safari, none of them worked. I deleted the browser implements cache dns, no proxy not enabled, no antivirus installed, no extension, no malware found, no parental con

  • Text entry problem solved

    My problem was this: pressing any character (s) on my keyboard has produced over and over the numbers from 1 to 0.  All character keys seem to work normally, but no matter what I tried to type, I had the same succession of numbers: 1234567890, or if

  • my screen has fallen to 90 degrees. It is now horizontal instead of vertical on the screen,

    I need to know how to flip the screen my back to a normal vertical view... portrait? landscape? Help me!

  • Bass Treble tone control problem - Windows 7 64 bit

    Under control panel, Sound speakers and headphones properties, tab controls tone, the button apply is gray for my bass/treble settings which will reset to 4 whenever my PC restarts. I can't set the Bass/Treble levels constantly where I want what they