CSS - Any Resources/tips For Mobile Devices?

Hi guys!

I thought it could be cool to somehow put together a list of all tips and tricks that should be known in order to program effectively in CSS.

Thanks for your contributions

Hey,

I'm making a new style for my wii fansite but the style I've got so far looks very boxy.

http://www.wii4friends.com/v2/

I was wondering if anybody had any tips and making the page more seamless and less boxy

I planned on making the box head title not so high.
I also find the rightside looking a bit dull

I am trying to use hover tips to describe my table headings. I have tried using the title attribute but some of the explanations are long and the title attribute has size limitations. So I have created a block that displays when the header is hovered over. My problem is when the table header is on the right side of the page the tip box scrolls off the right side of the page and can't be read. Is there a simple way using css to keep the box on the page?

Here is my CSS code:
Code:

/* CSS Document */

div.tips a {
	cursor:help;
	}

/* we don't know why this works.  change at peril of your sanity. */
div.tips a:hover {
   height: auto;
}

div.tips a span {
	display:none;
	}
	
div.tips a:hover span {
	display: block;
	position:absolute;
	margin-right:10px;
	padding: 0.5em;
	color: black;
	border: solid 1px #666666;
	text-align: justify;
	text-decoration:none;
	font-size:0.75em;
	z-index: 1;
	background-color: #FFFFCC;
	width:30em;
	}

I am on this big personnal project where I want to make a site where people can go look for resources and references.

Saying that, I would like to know which programming language should be included in the project. CSS, HTML, VB, Cobol, Java, will be included for sure.

Also, if anyone have good links to add to the links page, or to check out, please let me know. You can contact me at drummer_sweety@yahoo.ca Of course the devshed forum will be part of the links

Thank you for your help!

Hi,

I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox.

Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't.

My question is would I be better developing separate CSS files for each browser type and use a script to determine which one?

If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful.

Regards

Paul

PHP Code:
#searchBox {
    float:right;
    margin:0em;
    padding:0em;
    margin-right:0.2em;
    clear:right;
    background-image:url(/images/site/backgrounds/searchBox.jpg);    
    /*border:black solid 1px;*/
}
#searchBox input {
    margin:0em;
    padding:0em;
    background-color:#d2c5a2;
    
}
.submit {
    background-color:#6F5F42;;
    color:#483e2b;
    font-size:smaller;
    font-weight:bold;
    margin:0em;
    padding:0em;
} 





and html

PHP Code:
<div id="searchBox">
            <form action="search.php" method="post" style="margin:0em; padding:0em;">
                <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;">
                    <label>What are you shopping for?</label><input type="text" name="search" size="14"/>
                    <input class="submit" type="submit" name="submit" value="Search" />
                </fieldset>
            </form>        
        </div> 





i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!!

also is there anyway to make sure that the font sizes are same/similar in both IE and FF?

http://www.zahra-zahra.com/fullpage.html


EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box..

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

Greetings All,

Wonder if you might be able to assist...
I'm trying to make a page accessible from IE6 and generic mobile devices. I have selected different images to be displayed on the mobile screens using the 'media' attribute eg:
<style type="text/css" media="screen">
#mobileimage {display:none}
</style>

<style type="text/css" media="handheld">
#normalimage {display:none}
</style>

<div id="normalimage">
<img src="diagram 2 560wide.jpg">
</div id="normalimage">
<div id="mobileimage">
<img src="diagram 2 560tall.jpg">
</div id="mobileimage">

and this works just fine in IE6, Opera for Symbian UIQ (mobile device) and BlackBerry devices. However, the images are not displayed at all in Pocket IE on Windows Mobile 2003 devices, although other CSS layout is (kinda) OK. Apparantly, Pocket IE recognises 'all', 'screen', and 'handheld'.

Any ideas whether this will work? How to get round it?

All help gratefully received...
Thanks,

Nick.

Hi all,

Over the past week I have been porting my site over to Dreamweaver from Rapidweaver, as the latter has been exporting html and css code all over the shop.

I'm having some issues with the layout in Dreamweaver for browsers. As you can see in the picture the Enter Site.jpeg is offset but views fine on the web.

http://img273.imagevenue.com/img.php?image=679486341_Dreamweaveralignmentissue_122_46lo.tiff


And I'm having one issue with an image being moved out of position when viewed on an Android mobile phone.

I am using the following code to position the Enter Site.jpeg image on my index.html page...


http://www.seattleunderground.co.uk/Dreamweaver%20Site/index.html

CSS in the head tag at the top:

Code:

<style type="text/css">

.enter {
	position: absolute;
	width:133px;
	height:50px;
	top: 50%;
	left: 20%;
	margin-top: 100px;
	margin-left: 0px;
}

HTML in the body within a table tag:

Code:

<tr>
  <td><div class="enter"><a href="Home.html"><img src="_images/Enter Site.jpg" width="133" /></a></div></td>
 </tr>

When viewing on the Android the Enter Site.jpeg is located further to the right.

A friend mentioned to setup a CSS style sheet solely for the mobile device, but being a newbie I'm not sure how to code or do anything web dev based.

I hope someone can kindly help.

P.s. Also when I view my index.html on my Android I have to double tap to zoom out and view the graphic as it is centred vertically and horizontally on page. Is there anyway to fix that one page just for the mobile devices?

Best regards,

Ash

Hello,

I am trying to have make a 'facebook' style toolbar fixed to the bottom of the screen. This works on desktop browsers except Mobile Safari on the iPhone (due to the 'viewport' way of rendering the page). Is their a workaround for this? I have seen doctyper's method but can't get it to work.

Thanks