llynix.com » HTML/CSS http://llynix.com Code, Rants and Ramblings Mon, 15 Feb 2010 00:17:54 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Sideways Text http://llynix.com/articles/sideways-text/ http://llynix.com/articles/sideways-text/#comments Thu, 03 Sep 2009 17:01:48 +0000 Llynix http://llynix.com/?p=227 Just upgraded to Firefox 3.5 and I have to test out the goods.



Sideways Text

If your on a cutting edge browser the text should appear sideways. I had to tweak a bit to get it to display properly, so obviously there are a few bugs or misconceptions. The code for the curious is:


<div style="height:100px;">
  <br/><br/>
  <span style="-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);">Sideways Text</span>
</div>

]]> http://llynix.com/articles/sideways-text/feed/ 0 IE8 Compatibility View http://llynix.com/code/ie8-compatibility-view/ http://llynix.com/code/ie8-compatibility-view/#comments Tue, 30 Jun 2009 21:48:52 +0000 Llynix http://llynix.com/?p=179
Compatibility View

Compatibility View


The latest incarnation of Internet Explorer 8 adds a new twist to standards compliant web pages. When viewing a webpage in standards mode the user is presented with a compatibility icon that can be toggled to view the page using the Internet Explorer 7 engine.

However, as web master you have ultimate control. By using the X-UA-Compatible meta tag in your documents you can choose which mode you want your page rendered in and hide the button from users.


<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Always uses the latest available rendering engine.
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Display using the IE8 rendering engine.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Display standards mode documents in IE7 standards mode, quirks mode documents in IE7 quirks mode.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Use IE7 standards mode.

]]> http://llynix.com/code/ie8-compatibility-view/feed/ 0 Properly Hacking Max-Width for IE6 http://llynix.com/code/properly-hacking-max-width-for-ie6/ http://llynix.com/code/properly-hacking-max-width-for-ie6/#comments Sat, 02 Jun 2007 05:36:48 +0000 Llynix http://llynix.com/code/properly-hacking-max-width-for-ie6/ I’ve been trying to clean up the design of Llynix.com and get it looking relatively the same across the major browsers. One thorn in my side was the fact IE6 doesn’t support the max-width CSS property. It may not seem like a problem to you, but if you are lucky enough to view websites on a widescreen monitor the text has a tendency to run on a bit if max-width isn’t set. Imagine reading this entire paragraph in one line of text. It just doesn’t seem right.

So I apply a max-width which keeps things from running too far off the screen. This works for the major decent browsers, but our old friend IE6 doesn’t understand it. So what’s a web designer to do?

Enter the hack. Luckily IE does have a little piece of javascript that can help us out in faking our max-width. Svendtofte.com has the details of the wonderful snippet below.

width:expression(document.body.clientWidth > 800? "800px": "auto" );

This little ‘expression’ does the same job as max-width:800px; But how do we properly introduce it into our CSS? In the old days we’d rely on faulty CSS error control to splice in various pieces of code for different browsers. Today though we wash our hands of all that, and hopefully ignore such horriable code. There is an easier way.

Enter conditional comments.

Conditional comments only work on Internet Explorer browsers. Other browsers will just treat them as an ordinary comment and continue on. But when IE detects them it will include them if necessary. Zoffix Znet has an excellent article on conditional comments. In addition you might want to check out what Microsoft has to say about them.

Here is my max-width fix inside a IE6 only conditional comment.

    <!--[if IE 6]>
    <style type="text/css">
      #header {width:expression(document.body.clientWidth > 1000? "1000px": "auto" );}
      #mainbody {width:expression(document.body.clientWidth > 800? "800px": "auto" );}
    </style>
  <![endif]-->

Now the webpage looks much better viewed in widescreen in IE6.

]]> http://llynix.com/code/properly-hacking-max-width-for-ie6/feed/ 0 Website Design Skeleton http://llynix.com/code/website-design-skeleton/ http://llynix.com/code/website-design-skeleton/#comments Sat, 02 Jun 2007 04:54:14 +0000 Llynix http://llynix.com/code/website-design-skeleton/ You don’t want to re-invent the wheel every new website you begin coding on. Instead maximize your productivity with a template or skeleton if you will of a basic site design.

Your implementation may vary. I’ve tried to keep mine terse for the utmost configuration.

We’ll start with a basic header:

head.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Change Me Later</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>

I’ve choose HTML 4.01 strict for various reasons. You will need to remember to fill in your title.

As you may have noticed, I’ve included a style sheet in this header, so let’s go over that.

style.css

* {margin:0;padding:0;}

Not much to see here, we reset our margin and padding to 0 to eliminate cross browser quirks and general madness while designing. Some people prefer more in their default CSS.

Let’s continue on to the main page.

index.php

require('head.php');
<!-- Do stuff here -->
require('foot.php');

Not much to see nor explain. Now onwards to our footer.

foot.php

</body>
</html>

And there you have your skeleton. It’s up to you to add the muscle.

A few ideas:

  • Include your name, version and other information in comments in the header and stylesheet.
  • Include your statistics code in the footer.
  • Include any javascript you might use.
  • Instead write a php library to generate your header/footer bassed on doctype/chartype.
  • Set default text styles, colors etc to your liking in your CSS
]]> http://llynix.com/code/website-design-skeleton/feed/ 1 Creating a Linked Box (div) http://llynix.com/code/creating-a-linked-box-div/ http://llynix.com/code/creating-a-linked-box-div/#comments Tue, 29 May 2007 19:04:59 +0000 Llynix http://llynix.com/code/creating-a-linked-box-div/ This has been updated using jquery.

It’s easy to make a piece of text into a link, but what do you do when you want to make an entire area clickable?

Beginning web developers might try to wrap the entire div in an anchor tag. While this might work for some browsers, it isn’t valid HTML because anchor tags (<a href=”">) can not contain block level elements (like div).

We’ll start with a basic div with some text.

  <div id="box">
    <p>Linked Div</p>
    <p>By Llynix</p>
  </div>

Our first step is to make everything inside this box linkable. This is ensure proper fallback when dealing with Javascript disabled browsers.

  <div id="box">
    <p><a href="#">Linked Div</a></p>
    <p><a href="#">By Llynix</a></p>
  </div>

Now we’ll add our Javascript which does the job for us.

  <div id="box" onclick="javascript:window.location = '#';">
    <p><a href="#">Linked Div</a></p>
    <p><a href="#">By Llynix</a></p>
  </div>

Finally we can add some CSS to make it behave more like a link.

  <style type="text/css">
    #box {height:100px;width:100px;border:1px solid black;} /* Just some style to our div */
    #box {cursor:pointer;}
    #box:hover {background-color:yellow;}
  </style>

And there you have it. View example

]]> http://llynix.com/code/creating-a-linked-box-div/feed/ 0