US State Department workers have begged Secretary of State Hillary Clinton to let them use Firefox.

“Can you please let the staff use an alternative web browser called Firefox?” worker bee Jim Finkle asked Clinton during Friday’s State Department town hall meeting.

Judging by this screenshot taken by an IE6 user who was watching some videos on YouTube, it appears the Google company will be phasing out support for the browser shortly. I don’t have Internet Explorer 6 installed on my computer, so I can’t verify this first hand, but illogical it seems not and a simple Twitter search shows multiple people confirming the news. Heck, some are even downright ecstatic over the news.

Read the full article

Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.

Read the full article

After its early success, Netscape was roundly defeated by Microsoft in the so-called browser wars of the 1990s that dominated the Web’s first chapter.

Mr. Andreessen appears to want a rematch. Now a prominent Silicon Valley financier, Mr. Andreessen is backing a start-up called RockMelt, staffed with some of his close associates, that is building a new Internet browser, according to people with knowledge of his investment.

Read the full article

Microsoft has underlined support for its Internet Explorer 6 web browser, despite acknowledging its flaws.

The software giant said it would support IE6 until 2014 - four years beyond the original deadline.

Critics - some of which have started an online campaign - want the eight-year-old browser mothballed because they claim it slows the online experience.

Read the full article

Sometimes when you’ve coded up your website in CSS no matter what width fixes you try you’ll still see that horrible horizontal scrollbar on your website’s pages. But it’s harmless and doesn’t effect how your site displays in taking about something like this:

In this text box you will see a scroll bar going across below. It is not being used so it’s not really needed!

When scroll bars are needed they are acceptable but this tutorial will show you an easy method of removing it. Through using a small code in your stylesheets

overflow-x: hidden;

This code simply hides your horizontal scroll bar. Simply think of it like this. You have graph that has a Y axis and X axis. The Y axis is the vertical line the X axis is the horizontal line, simular to this your overflow-y: is your vertical scrollbar and your overflow-x: is your horizontal scrollbar going across. You may also expand on this code by using such codes like:

overflow-x:auto;
overflow-x: visible;
overflow-x: scroll;

This can also be applied to the overflow-y: property.
If you want to place the code properly it needs to placed within a special part of your stylesheet:

html {overflow-x: hidden;}

This is the most simplest way to place this code into your stylesheet, but it can be placed in other CSS properties such as the body tag and general divs. However if you place the code anywhere but the html { property you need to make sure you define some sort of width/height/position/float etc.

html, body {
margin: 0px;
background-color:#FFFFFF;
padding: 0px;
overflow-x: hidden; }

Placing this hack in your pages.
You can use this hack to stop scrollbars in other things such as text area’s to do this you would simply use this code:

<textarea cols=”35″ rows=”4″ style=”overflow-x: hidden;”>No scroll bar!</textarea>

Using the code above your text box will look like this:

Look no hortizontal scroll bar!

The great thing about this small code is that it hides any horizontal scrollbar in anything HTML related as well as hiding the bottom scroll bar on your browser window!
This CSS hack isn’t valid in CSS 2.1 but is valid in CSS 3. Be aware of that! Consult W3.org’s CSS validators for more information on different CSS levels as well as validation on CSS, and how to make sure your using valid CSS!

Author’s URL: pulsegfx.net

Abstract.
If you use  the Firefox 3 beta you know that it handles this automatically. Increasing the size in Firefox 3 increases everything in size, which actually feel really natural and nice. But despite it’s growing market share, we can’t count on Firefox for the resizing needs of our users.
I’ll try to explain how to make an All-Expandable box, with the following features:
•    Works in all major browsers
•    Expands both vertically and horizontally
•    Uses a single background image

This is like a tall order, especially the use of the background image. This will end up using kind of a combination of the CSS sprites technique since different areas of the image will be used in different places and the Sliding Doors technique, since different amounts of those images will be visible depending on the current size.
You can make the box horizontally expandable.
This is the one method to make a box horizontally expandable: specify your width in em’s. For example:

.box {
width: 35em;
margin: 50px auto;
}

The margin is there for example purposes, to keep it centered and away from the top edge of the browser window.
About image placement.
In this example, the box has rounded corners, a bit of a drop shadow, and a bit of an inner shadow. This means that all of the four corners of the box are distinctly different. This is uniquely challenging since images are not expandable. We will need a way to apply the four different corner images to the four corners of the box separately.

Also, we need to overlap them in such way that the transitions are seamless. And also, we try to do this with only a single background image, to make it as efficient as it possible.

Below is an image of how you might think of what we need to do. The boxes would be overlapping, I nudged them apart so you can see the whole boxes.

When creating the background image, think big. The bigger your background image, the larger you will be able to expand without borking the layout. The example background is 700px wide which gets you about 4 or 5 different text sizings it works at, but it does eventually break apart above that.
Coding the box.
Of course we always like to be as semantic as possible with our XTHML. That means not using extra markup for things that aren’t really content but are purely design. Unfortunately, with all this craziness of needing four boxes for our single box, it ain’t gonna happen.
This is how it’s done:

<div class=”box”>
<div class=”topleft”>
<div class=”topright”>
<div>
CONTENT GOES HERE
</div>
</div>
</div>

<div class=”bottomleft”>
<div class=”bottomright”>
</div>
</div>
</div>

Styling the box.
Below there’s the CSS for the four areas within the box:

.box div.topleft {
display: block;
background: url(”images/box-bg.png”) top left no-repeat white;
padding: 2.0em 0em 0em 2.0em;
}

.box div.topright {
display: block;
background: url(”images/box-bg.png”) top right no-repeat white;
padding: 2.0em;
margin: -2.0em 0 0 2.0em;
}

.box div.bottomleft {
display: block;
height: 45px;
margin-top: -2.0em;
background: url(”images/box-bg.png”) bottom left no-repeat white;
}

.box div.bottomright {
display: block;
background: url(”images/box-bg.png”) bottom right no-repeat white;
height: 45px;
margin-left: 3.0em;
}

You should note that the negative margins are necessary to pull back from the padding applied from the parent spans. It just works out good that way with the padding, keeping text inside the box. Also the height of the bottom spans are set in pixels. That is on purpose as they need to be kept short and not be expandable.

Author’s URL: www.webdesignerwall.com

Firstly, you should open the Photoshop file. Then turn off the menu text Layer Group and save the main background as menu-bg.jpg.

2. Button graphics
After that you should turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the “home” item, go to menu Edit > Copy Merged (Cmd + Shift + C).

Then make a new file and take note of the file dimension (w x h), in this case the “home” graphic is 144 x 58px. Paste the “home” graphic in the new file. After that you should go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.

There you can see how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.

Repeat this step for the other buttons. You should have the follow graphics:

3. HTML source
When you are done with the graphics, you should start coding. Start with an un-ordered list <ul>.
•    note there is an id=”menu” assigned to the<ul> tag
•    an unique class name assigned to each link <a>
•    an empty <span> tag (the purpose of this is to make the mouseover effect)

<ul id=”menu”>
<li><a href=”#” class=”home”>Home <span></span></a></li>
<li><a href=”#” class=”about”>About <span></span></a></li>
<li><a href=”#” class=”rss”>RSS <span></span></a></li>
</ul>

#menu
Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

#menu span
Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.

#menu span {
display: none;
position: absolute;
}

#menu a
The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

#menu a:hover
When mouseover the link, we want to shift the background image from top to bottom.

#menu a:hover {
background-position: left bottom;
}

#menu a:hover span
When mouseover the link, we want the span element to display:block.

#menu a:hover span {
display: block;
}

#menu .home
Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}

#menu .home span
Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)

#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

#menu .about
Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}

#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

#menu .rss
Repeat this step for .rss

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

All in one:

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Author’s URL: www.webdesignerwall.com

Overview
Usually, what you need to do is style the ol element to Georgia font, and after that reset the p element (nested in ol) to Arial.

1.    HTML source code.
You should make an ordered list. But don’t forget to wrap your text with a <p> tag.

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

There you may see how the default ordered list will display:

2. ol element
Let’s style the ol element:

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

The list will be like this:

3. ol p element
And finally style the ol p element:

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

Your final list should look like this:

So let’s start with the html. You should make a new document and name it cssmenu.html. You need to create a container for the menu with a div id called MenuHolder. Place this html code in between the body tags of your page.

<div id=”MenuHolder”>
<ul>
<li><a href=”cssmenu.html” class=”current”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”partners.html”>Partners</a></li>
<li><a href=”rss.html”>RSS</a></li>
</ul>
</div>

Now your menu looks like a list. And now you can add the CSS rules to style the menu. Firstly, in the head of your html document you should put this line in to attach an external stylesheet: <link href=”cssmenu.css” rel=”stylesheet” type=”text/css” /> . Then you open a new document and name it cssmenu.css and put it in the same directory as you html page.

In your cssmenu.css document put these lines to style the menu. If your use your own images for the menu background and highlight, you may have to tweak the padding a little if your using a different size then 15px X 40px

#MenuHolder {
font: bold 13px Arial;
width: auto;
height: 40px;
padding-left: 0px;
padding-right: 0px;
float: left;
margin-left: 0px;
margin-right: 0px;
}

#MenuHolder ul {
width: 395px; /*width of menu, you can also use percentages. Set this to your need*/
height: 40px;
border: 1px solid #748d64; /*green border*/
border-width: 1px 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
background-color: #black;
background-image: url(menu_up.jpg); /*link to the background image*/
background-repeat: repeat-x;
background-position: center center;
margin-left: 0px;

}
#MenuHolder li {
padding-left: 0px;
margin-left: 0px;
display: inline;
}
#MenuHolder ul li a{
color: #000000;
text-decoration: none;
border-right: 1px solid #748d64;
height:22px; /*Green border between menu categories*/
padding-top: 12px;
padding-right: 11px;
padding-bottom: 5px;
padding-left: 11px;
float: left;
}
#MenuHolder ul li a:visited{
color: #000000;
}

#MenuHolder ul li a:hover, #MenuHolder ul li .current{
color: #000000
background: black url(menu_down.jpg) center center repeat-x;
padding-top: 13px;
padding-bottom: 0px;
margin-top: 0px;
height: 28px;
}

And the last set of rules deals with the current page being highlighted in the menu so make sure to put the class=”current” (see above html) on each page that corresponds to that link. Also, on the last set of rules, notice the top-padding was shifted down 1px from 12 to 13. This is to enhance the effect of the button being depressed.