CSS - Developing Xhtml/css For Iphone & Ipad
Hi,
I don't have access to Dreamweaver's tools and was wondering if there was a way to test my designs on iPhones and iPads, without actually having an iPhone or iPad. Thanks! - M Similar TutorialsHi, Is it possible to make 3 different sites depending on the client browser medium? I have a flash site, that needs to be presented non-flash for the iphone, and another non-Flash site for the ipad. Is there a way CSS can detect these 3 different browser mediums? If so, then how? thanks - I'll start with my code. code:--------------------------------------------------------------------------------<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { height: 100%; width: 100%; overflow: hidden; margin: 0px; padding: 0px; } #menu { position: absolute; display:block; bottom:0px; left:0px; width:100%; border:1px solid #002E80; background-color: #E5EFFF; } #content{ padding: 5px; width: 100%; height: 100%; overflow: auto; z-index: 100; } </style> </head> <body> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> <div id="menu"> <table width="100%" border="0"> <tr> <td><div align="left"> <input type="button" name="prevBut" value="<< Prev" /> </div></td> <td><div align="right"> <input type="button" name="nextBut" value="Next >>" /> </div></td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------------------- The problem falls on the positioning of the scrollbar. I need it to be over my bottom menu. Right now it falls below the menu. Why is this? Hi, I am currently trying to develop a website that can change the layout according to user settings (at leas those seem to be the requirements). I will give a simple example. Mainly the user will have a website with a header, content and footer. In the content he will have a left menu, and some text on the right. A user can decide (if he wants) to change that and place the menu on the right and the text on the left. I have thought on this a lot and came up with only one solution; That is to have two Xhtml pages and if the user wants the menu to load on the left I load one Xhtml page, if he wants it on the right then I load another Xhtml page. However the user seems to want to allow different (many)options on how the layout of the website may change. I also thought of using absolute values, but do not like them a lot, and found no websites that show this. So what could I do to achieve this request? Are there any other options I have? Any comments on this would be most welcome Regards, Sim085 ListInventory.com It looks all "squished" on the iPad. Been tasked with finding out why. Worked fine until adding the featured product block on the right yesterday. What did I screw up? It doesn't do this in Safari for Windows. The IPad is underlining my phone links automatically making them invisible. I am aware of the fix using the meta tag. The problem is that these numbers are substituted by javascript in our AdWords tracking. I am afraid the <meta name="format-detection" content="telephone=no" /> will cause the phone tracking not to work on IPad. This is the simple css for the phone number: #phone { position:absolute; left:285px; width:250px; top:237px; height:25px; font-size:18px; color:#0F2532; } and the site is assistedfertility.org. Is there a css rule I can add to #phone that will remove the automatic underline? What other ways that wont effect javascript number tracking? Thanks I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page). Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page. What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process? Has anyone else dealt with a problem with using custom fonts w/ @font-face and Ipads? I have a site http://osake.garychus.com and throughout the site the font Lato is messed up, but on all other platforms it looks great. I am having trouble trying to work out why on an iphone my css file never gets used. when a user arrives at my site with a screen size <= 1024 i apply a different style sheet using this function - http://www.kelvinluck.com/2006/05/s...ts-with-jquery/. i know this isnt a way of doing it for an iphone as you use user.agent but i am doing it for smaller screens at the same time. Code: <link href="index.css" rel="stylesheet" title="screen" type="text/css" media="screen" /> <link href="css/mobile.css" title="mobile" rel="alternate stylesheet" type="text/css" /> that is how i order my stylesheets in my html. on opera on the iphone the css works fine but its just safari. on android the site works fine. any help would be really grateful thanks in advance Here's the CSS excerpt: div#uhgWrapper { width: 320px; height: 268px; } div#uhgWrapper[footerIncluded="false"] { height: 310px; } body[orient="landscape"] div#uhgWrapper { width: 50px; height: 50px; } body[orient="landscape"] div#uhgWrapper[footerIncluded="false"] { height: 50px; } this works great for Safari on the desktop but, the last two elements aren't recognized on Safari on the iPhone. Any suggestions? TIA Hi all, For some reason, my site (http://www.emineer.com) cuts off a bit when viewed on an iPhone. Here's a screen-capture to show what I mean: You can see that the right edge of the top blue background is getting cut off (it should stretch to the edge of the screen). It even happens on inner pages: As you can see, the right side of my site is cut off a bit. I have width set to 100%, so I'm not sure why this happens. It's not my phone because other sites work just fine. Any reason for this? Hello, I have just got round to testing my site on my iPhone for continuity and I have found a weird problem. Here is the situation, on my blog I sometimes need to show blocks of code so I naturally use <pre></pre> tags. Some blocks of code are too wide for my content column so I coded up a little expander box with jQuery. This works fine and I'm really happy with it but the iPhone manages to screw it up. If you can test a page on my blog (rendernaut[dot]com) and navigate to a code block, you can see it is just a simple toggle switch. But when this is done an an iPhone the font inside of the block increases proportional to the width. Its the only browser I've tested which does it, does anyone have any answers to why this is? Thanks OK, the site looks great in all browsers, Mac and PC. But on an iphone, the footer background does not expand the width of the screen. I don't know why. Here is the site here Does anyone know how to make this work on an iphone? thanks Hello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. I hope one of you can help, as this is driving me mad. I've got a div that I'm using to display a background colour that has a fixed width and height="100%" (I'm having a problem with the hieght as well but I'm confident I can sort that), as soon as I change the declaration at the top of the page from the HTML 4.01 Transitional to the XHTML 1.0 Transitional the div disappears, why? Cheers, Ellroy Hi, I want to validate my page to XHTML 1.1, but to do that I need to remove border="0" (Only used on two header images). I have tried putting border-style:none in my CSS in EVERY place I could think of, but it just doesn't work. My css is he http://www.planetphillip.com/style.css One other thing, when I remove the border="0" code, IE6 vertically re-aligns the header images. Would somebody be kind enough to explain why. BTW the site in question is: http://www.planetphillip.com/ TIA Phillip I'm having some serious difficulties... but not the standard, "what's wrong with my code", everything validates properly. Seperately... I really dislike linking outside of a forum to describe a situation... but in this scenario I think it is the only feasible way to explain it. The template that I have created for my website validates as, xhtml 1.1 -- tentatively as do all other documents that validate against the formal parsing. See the following to understand my situation. EDIT: Validation of my pages template in html format. - yay! it validates as XHTML 1.1 EDIT: Validation of my pages stylesheet - yay! it validates as CSS 2.0 EDIT: Validation of them both together returns the following: - Boooo! It won't validate and also tells me: Code: "Please, validate your XML document first! Line 2 Column 3 The markup declarations contained or pointed to by the document type declaration must be well-formed. " I would have thought that these things are dependent on eachother. Does it make sense that something can pass a XHTML compliant, but then be formed badly in such a way that a formal parser would read it wrong with respect to CSS? Is it because of my comments? If you look at the code of the page I have detailed a few things that I thought were important. I am developing websites using ASP.NET and C# for the code-behind. I just started using css design and I realized after trying to validate my rendered pages that some things in ASP.NET would be VERY difficult to make completely valid. IE: ASP.NET automatically renders this piece of code everytime the page is rendered: Code: <script language="javascript"> <!-- function __doPostBack(eventTarget, eventArgument) { var theform; if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) { theform = document.forms["frm"]; } else { theform = document.frm; } theform.__EVENTTARGET.value = eventTarget.split("$").join(":"); theform.__EVENTARGUMENT.value = eventArgument; theform.submit(); } // --> </script> That right there is invalid due to the fact that it does not have type="text/javascript" in the <script>. There are many other instances of this that I won't go into detail. In order to fix this you have to override ASP.NET's page rendering methods and do a Regex! thats right, a regex on EACH line of code to replace the line above with valid XHTML. This can become VERY inefficient if you are serving 30+ pages a second. My question is this: at this point is it really worth the performance hit on my web server to make my asp.net sites XHTML compliant? on a side note, I would like to bludgeon the MS designer that wrote these chunks of code into ASP.NET!@!$%#$ thanks! Hello, I was just wondering how XHTML and CSS works within data-driven websites. I am new to developing database driven sites and need to develop one that uses XHTML and CSS formatting for content as this is what the company I work is aiming towards, due to web accessibility requirements. Does anybody know of any good books/resources that cover developing database driven (php/mysql) websites and implementing XHTML/CSS from within these sites. Would I be right to say that an area for the database content is created in the page which is written in XHTML? if this is correct does this area link to the CSS? Any help would be gratefully appreciated.... Thanks, Andy I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames? Thanks I am building a new navigation menu which works fine as you can see below: http://www.hotlinkhosting.com/test/menu.php However, the following version does not: http://www.hotlinkhosting.com/test/menu.php?. The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help. Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors. |