Posts by ko ko

I'm not sure, but try with this:

<img src="your_image.png" style="background:transparent" />

How did you save the image in photoshop? You should use save for web in file menu. I'm not photoshop master, so I can't help you much more. Good luck friend.

I'm not sure, but try with this:

<img src="your_image.png" style="background:transparent" />

How did you save the image in photoshop? You should use save for web in file menu. I'm not photoshop master, so I can't help you much more. Good luck friend.

The anchor element is an inline element. Inline element can't contain block level element. You put h1 tag in anchor tag. It makes the browser confuse. You should write like that:

<h1>Example<a href="#"><img src="image.gif" /></a></h1>
<h1><a href="#"><img src="image.gif" /></a>Example</h1>
<h1><a href="#"><img src="image.gif" /></a><br />Example</h1>

The block element can contain inline and other block level element.

<div><!-- The div is block element -->
        <h1>This is block element heading</h1>
</div>
<!-- This is available -->

<span><!-- The span is inline element -->
         <h1>This is block element heading</h1>
</span>
<!-- This one is unavailable -->

I hope this will help you...

Yes. we all afraid IE bugs. Cheers... friend.

What version of DOCTYPE do you use? Did you put the DOCTYPE in your HTML? Use div instead of table. It will make you comfortable and solve your problem. Here is example.

HTML:
<div id="first-row">
This is the first.<a href="javascript:show()">Show content</a>
</div>
<div id="second">
This content will show when you click a link or button placed above div.
</div>

CSS:
#second {
        overflow: auto;
        height: 66px;
        max-height: 66px; /* IE ignore this declaration */
        display: block
       }

Good luck..

Using margin 'auto' property can stay element in center. Don't use 'text-align' property to center the element. 'text-align' is only for text, not the element. You may also use like

CSS:
p {
     text-align: center
    }

HTML:
<p>This text will go to center</p>

Or use table cell align attribute.

<td align="center">Align center cell</td>

In your process. You could also use.

div {
     margin: 0 auto;
     width: 400px /* auto margin can only apply with exceed width, if not it will ignore it */
     }

I hope it will a little support for you.

Using margin 'auto' property can stay element in center. Don't use 'text-align' property to center the element. 'text-align' is only for text, not the element. You may also use like

CSS:
p {
     text-align: center
    }

HTML:
<p>This text will go to center</p>

Or use table cell align attribute. <td align="center">Align center cell</td> In your process. You could also use.

div {
     margin: 0 auto;
     width: 400px /* auto margin can only apply with exceed width, if not it will ignore it */
     }

I hope it will a little support for you.

Try this:

a {
     width: 245px; /* at least your image size when hover */
     height: 245px; /* at least your image size when hover */
     float: left;
     display: block
    }
a:hover img {
    width: 240px; /* be careful that width must not larger than it's container width 245px */
    height: 240px; /* be careful that height must not larger than it's container height 245px */
   float: left; /* no margin need, it will force to move another image */
   }

Hope this will help. Good luck..

It is the same below.

$content = "Hello From ";
//$content has the value "Hello From" string

$content .= "My PHP Page";
//Now, $content has the value "Hello From My PHP Page" string

It assign the variable to its value and another values. I can't explain very well because of I'm newer of PHP. Go there and it will teach you much more. Cheer..

The error is there is no variable named content like $content. Set the $content variable. Here it is:

$i = 0;
$content;
foreach ($value as $row) {
$content .= "<option value=\"" . $i . "\" " . $selected . ">" .$row . "</option>\n";
$i++;
      }

But there is no print result for above codes. What do you want for?
Do you want to print out the options. Try this

$i = 0;
echo "<select name=\"selectItem\">";
foreach($value as $row) {
echo "<option value=\"" . $i . "\">" . $row . "</option>\n";
$i++;
}
echo "</select>";

Good luck..

Your theory is wrong. Left and right were 50% of width, so the total width of these two elements is the full size of the window, and there is no space for center element. The point is you need the center element has the fixed width and the left and right were decided by the resolution. So, you must give standard width for the center. How much width do you want for the center? And how much resolution is the standard to use?For example, you design based on 1024 resolution, you give the center element width to 600px wide. It means it has 60% of the browser width. So you can give the left and right half of 40%, each has 20% width. But this is not good. You should set all element width for percentage value. Or try with absolute position. Here is the example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0;
	padding: 0
	}
div.body{
    margin:0;
    padding:0;
    }
div.left{
	position: absolute;
	left: 0;
	top: 0;
    width: 20%;
    height: 686px;
	background-color: #336699;
    }
div.center{
    width: 600px;
    height: 686px;
	margin: 0 auto;
    background-color: #5292d9;
    }
div.banner{
    height: 200px;
    }
div.right{
    position: absolute;
	top: 0;
	right: 0;
    width: 20%;
    height: 686px;
    background-color: #336699;
    }
</style>
</head>
<body>
<div class = "left">
</div>
<div class = "center">
<div class = "banner">
<img src="banner.jpg" />
</div>
</div>
<div class = "right"> …

It was fine. Thanks for your reply.

Your code was wrong. Should be

<!--[if gte IE 5.5]>
<link rel="stylesheet" type="text/css" href="standard.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="standard.css" />
<![endif]-->

It should be work. Good luck..

Give the z-index to negative value.

z-index: -10000

Hope this help.. Why not use body or parent element background? The background you used is not a background. It's html element and not the same as background.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>One DIV next to two DIVs</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: normal 11pt/1.8em Arial, Sans-serif;
	color: #1d1d1d
	}
#wrapper {
	overflow: hidden;
	/* stay center when the screen increase or decrease */
	width: 998px;
	margin: 0 auto;
	background: #ccc
	}
#right {
	/* float to right */
	float: right;
	/* need width */
	width: 22%;
	margin: 2% 3% 2% 0;
	border: 1px solid gray;
	height: 100%;
	min-height: 150px
	}
#left {
	/* float to left */
	float: left;
	/* need width */
	width: 69%;
	margin-left: 5%;
	background: #ccc
	}
#left_upper, #left_lower {
	margin: 1.3em;
	border: 1px solid gray
	}
</style>
</head>
<body>

	<!-- container wrap all elements -->
	<div id="wrapper">

		<!-- DIV on the right side -->
		<div id="right">
			<h1>Right Side</h1>
		</div>
	
		<!-- DIV on the left which contains two divs -->
		<div id="left">
			<!-- upper div -->
			<div id="left_upper">
				<h1>The first content.</h1>
			</div>
			<!-- lower div -->
			<div id="left_lower">
				<h1>The second content.</h1>
			</div>
		</div>
	</div>
</body>
</html>

Good luck.

Post your code here. Without seeing any codes, we can't help you.

Validate your HTML. Here is XHTML 1.0 strict mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Put this top of your html document. I hope this will solve.

The first is local, which is on your PC, and the second is the another site or absolute address of your site. I don't think the speed depend on the file location which are from the same location. 'http://www.mysite.com/images/image.jpg' or 'images/image.jpg ', I think they are the same, because of the same root on my PC. Maybe slow if the file is on different location. Thanks for the question. need to ask like that. Sometimes, we forget the main focus.

Correct the red color code.

#body {
height:400;/* you need unit measure, only numeric value make browser confuse, add px */
width: 950px;
background-color:#FFFFFF;
}

When I corrected this, the gap between and body and footer removed. But, there is a gap between campaign div and body div. The easiest way is float the campaign div. Don't forget to clear all float element for placing next element to appear in new line. The center tag should not be used in xhtml. XHTML strict mode cann't support the deprecated tag likes font tag. You can use margin-auto property instead of it.

I don't know what do you want to center, text or element. If you want to center the text, try this:

#
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;/* white-space ignore text-align property, you should remove */
text-align: center
}

You can use span tag to hold text and vertically align to it. Here is example:

<span style="vertical-align:middle">

You can also use inline, embedded, or external style to it. Good luck.

Add this to your container

#container { 
padding: 20px 0 0 0px; /*You should give 'padding-top:20px' instead of this and px doesn't need after 0 value' */
width: 100%; 
background-color: #CC3300; 
overflow: hidden
}

Add red color text, and try.. I hope this will help you.

Try to group with text container like p. Fieldset is better to group form data. Here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Line-height Problem</title>
<style type="text/css">
fieldset {
	margin: 1.3em 26%;
	/*For Firefox */
	-moz-border-radius: 5px;
	/*For Safari */
	-webkit-border-radius: 5px;
	line-height: 2.4em;
	font-family: Arial,Helvetica, Sans-serif;
	font-size: 11pt
	}
fieldset legend {
	color: #6b6b6b;
	font-weight: bold
	}
form {
	margin: 0;
	padding: 0
	}
form input.field {
	width: 224px;
	border: 2px solid #a1a1a1;
	height: 18px;
	float: left;
	margin-top: 4pt
	}
form input.field:hover, form input.field:focus {
	border-color: #686868
	}
label {
	width: 68px;
	float: left;
	text-align: right;
	padding: 0 7px 0 3px;
	vertical-align: top;
	font-weight: bold;
	font-size: 9pt;
	color: #555555
	}
</style>
</head>
<body>
<fieldset>
<legend>Register</legend>
<form>
<label for="name">Name:</label><input type="text" name="user_name" class="field" /><br /><label 

for="password">Password:</label><input type="password" name="psword" class="field" /><br 

/><input type="submit" value="Submit" /><input type="reset" value="Cancel" />
</form>
</fieldset>
</body>
</html>

Good luck..

Post your code here, let us see.

Is your html has doc type? And what version of IE do you use? I check your codes with IE 7 and the result is same as FF. If you didn't add doc type, you need to put it first. Here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">

It is strict mode. I think you already use it, because you inserted slashes inside the 'input' tag.

That is sample for your layout. You could group your banner, content body and footer with the same container. So it hold them together when the resolution increase or decrease and they will stay specific location. Your banner is wider than 1000px and it will stay across the page in 1024 resolution.You should give your banner maximum width of 1000px.

<table width="100%">
      <tr>
      <td width="100%" valign="top" align="center">
      <table width="your banner width"><!-- Banner, add banner code in this 'td' -->
      <tr><td></td></tr>
      </table><!-- your banner finish here-->
      </td>
      </tr>
      <tr>
      <td width="100%" valign="top" align="center">
      <table width="content width"><!--your content body,add content body codes in this 'td' -->
      <tr><td></td></tr>
      </table><!--your content body finish here -->
      </td>
      </tr>
      <tr>
      <td width="100%" align="center">
      <table width="footer width"><!-- add your footer code here -->
      <tr><td></td></tr>
      </table><!-- your footer finish here -->
      </td>
      </tr>
      </table>

Sorry for my bad language.

That is sample for your layout. You could group your banner, content body and footer with the same container. So it hold them together when the resolution increase or decrease and they will stay specific location. Your banner is wider than 1000px and it will stay across the page in 1024 resolution.You should give your banner maximum width of 1000px.

<table width="100%">
      <tr>
      <td width="100%" valign="top" align="center">
      <table width="your banner width"><!-- Banner, add banner code in this 'td' -->
      <tr><td></td></tr>
      </table><!-- your banner finish here-->
      </td>
      </tr>
      <tr>
      <td width="100%" valign="top" align="center">
      <table width="content width"><!--your content body,add content body codes in this 'td' -->
      <tr><td></td></tr>
      </table><!--your content body finish here -->
      </td>
      </tr>
      <tr>
      <td width="100%" align="center">
      <table width="footer width"><!-- add your footer code here -->
      <tr><td></td></tr>
      </table><!-- your footer finish here -->
      </td>
      </tr>
      </table>

Sorry for my bad language.

What is font: MyCustomFont? Wrong css.
Must be:

font-family:  MyCustomFont;

'font' is short hand property. You must use this for shorthand.

font: [font-weight] [font-style] [font-variant] [font-size/line-height] [font-family];
/* font:  MyCustomFont is wrong */

How much resolution do you use for banner? It is too wide. You should base on 1024. Group with same container for your banner, body, footer, etc. I am not sure it will help, but try this one.

<table width="100%">
       <tr>
       <td width="100%" valign="top"><!-- Banner ---->
              <table width="100%">
                  <tr><td></td></tr>
              </table>
       </td>
       </tr>
       <tr>
       <td width="100%" valign="top"><!-- Content --->
              <table width="100%">
                 <tr><td></td></tr>
             </table>
       </td>
       </tr>
       <tr> 
       <td><!-- Footer --->
             <table width="100%">
                 <tr><td></td></tr>
            </table>
      </td>
      </tr>
</table>

Your site look nice.

What is your code? Post your code here. We don't know what the problem is without seeing some codes. Also, IE have some problems with using percentage values.

I tested with your codes, and it is fine. What is your problem? Is your css file located in the css folder? Check your file location. If the html and css in the same root, create a folder named css you gave it, and move your css file into it. There is no error founds.

This is because you floated the li tags from parent ul. So, it force it all child li to float. So you need to break float for the child li tag. Here

#nav ul ul li {
       float: none
}

It would work. And puts doctype in your html.

IE 6 and older can't understand li:hover function. You need a script for this function. Here is js.

navHover = function() { 
var lis = document.getElementById("nav-menu").getElementsByTagName("LI");	
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";		}
lis[i].onmouseout=function() {			
this.className=this.className.replace(new RegExp(" iehover\\b"), "");		}	} }
if (window.attachEvent) window.attachEvent("onload", navHover);

You need to pay the unique id to your main ul tag. The script get the ul tag using DOM object. Here it is:

document.getElementById("nav-menu")

The text shown with red color is the id of the ul. And get this in your HTML head section.

<!-[if gte IE 6]>
<script type="text/javascript" src="ie.js"></script>
<![endif]->

Good luck.

Use css. Here is example:

textarea#reply {
      width: 424px;
      height: 126px;
      border: 1px solid gray;
      overflow: auto /* Hiding scroll-bar in IE */
     }

Try this:

#upperBarWrap {
	margin:0;
	position:fixed;
       For /* IE */
        left: 0;
	width:100%;
}

Set 'left=0' property to say IE where the fixed position start.

The problem is the 'inline' property to your div. I can't explain clearly but changing block element to inline wrap some white space around them. Try to float them appear next to each.

#
.enlinia {
border:thin solid;
height:8px;
width:13px;
float: left
}

This should work. Thanks for your response.

The problem is the 'inline' property to your div. I can't explain clearly but changing block element to inline wrap some white space around them. Try to float them appear next to each.

#
.enlinia {
border:thin solid;
height:8px;
width:13px;
float: left
}

This should work. Thanks for your response.

Need '>' to your div open tag. And XHTML is case-sensitive and all tags and attributes must be lowercase, and non-close tags need forward slash such as 'img', 'br' or 'hr'.

<IMG SRC="../imatges/botoAmunt.png">

Must be

<img src="../imatges/botoAmunt.png" />

You need to hide the sub menu until hover on it's parent 'li' tags. And show when the cursor over 'li' tags. Like:

/*need hide*/
ul ul {
display: none;
position: absolute;
width: 124px;
height: auto;
left: 0;
top: /*it parent's height, li tag*/ px
}
/*show when hover it*/
ul li:hover ul {
display: block
}

Try above codes. It should work on IE(above 7 and later), FF, Safari, Opera. For IE older, you need a script for the 'li:hover' statement.
Note that the child 'ul' is position absolute, and it will appear when you hover on it's parent 'li', 'li' tag was not relative to it's child. You need the 'li' tags relative to it's child 'ul' and appear start from it when hover.

ul li {
position: relative
}

And don't forget doctype for your html. 'Strict' mode is better. Sorry for my language skill.

'margin' auto needs DOC type in IE. And what is your code. If you don't show your code, we can't find what the problem is. So, post your code. Insert the doc type in your html first. Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">

If it not ok, post your code here.

The element vertical align is depended on it's height and line-height property. If height and line-height were the same, the content it would be stay vertically middle. Add line-height to your '.navlinks' property:

.navlinks{
background-image:url(../slices/navbutton.png);
background-repeat:no-repeat;
height:32px;
line-height: 32px;
margin-left:-15px;
}

Remove 'vertical-align:middle' from anchor link.

.navlinks a {
font-family:Arial, Helvetica, sans-serif;
color:#00275c;
font-size:14px;
font-weight:bold;
padding-left:38px;
line-height:10px
}

Good luck.

Let me see your file, the code can't show me completely and I can't see your image. And type attributes' values with double quotes, because you used strict mode. And the image attribute width and height were still needed.

Float your images. Put your images' attributes 'width' and 'height'.
Example:

<img src='k24_ctrl.gif' width="-" height="-" class='spc'>

And css like that:

img.spc {
      float: left;
     }

I check your code and it is ok. Can I know what problem do you have? If you want to control the height of 'textarea', try with 'CSS', it will be more flexible and effective than HTML attribute.

Check url of the file. Are 'assests' folder and the 'css' file same root? You can also write inline-style. Like:

<body style="background: url('assets\back.jpg') no-repeat top center;">

But external style-sheet was strongly controlled of the layout of your site with one file. The best way is placing the 'css' file and images in the same root.

This is a real headache to set the marker position when we use the 'list-style-image'. The position is depends on the browser type. Use as 'background-image' is better than 'list-style-image'. The vertical-alignment is apply to the 'inline' element, it can't apply to block-level element. Use 'line-height' property instead of 'vertical-align' for vertical alignment of elements. Here is example:

ul.nrml-bul {
     list-style: none;
     margin: 0;
     padding: 0;
     width: auto
    }
ul.nrml-bul li {
     list-style: none;
     background: url('../images/bullet-blue-normal.png') no-repeat 0 50%;
     /* Need space to show background */
     padding-left: 1.4em;
     line-height: 1.3em
     }

And don't forget to validate your HTML.

Dear chowdarysmk, thank for reply. I correct some code in your css shown by red color, please try with these. And there is no vertical-align for block level elements. So, the vertical-align for li was ignore. I don't know exactly what your problem was, but I think it is the vertical alignment between text and marker(list-image). You can't set the vertical alignment of the marker, but line-height property available in IE.

.large-bul{	
list-style-image: url('../images/bullet-blue-large.png');
	list-style-position:inside;
	margin: 0;
        padding: 0;
	height:242px;
	font:1.4em/1.5 "Trajan Pro","Times New Roman", Times, serif;
	text-transform:capitalize;	
}
.large-bul li{
	background:url('../images/list-bg-other.png') -11px 0px no-repeat;/*leave spaces between each of value in short hand declaration*/	
	padding:5px 10px 10px 10px;
	height:47px;
        line-height: 38px; /*Work with IE*/
	vertical-align:middle;/*Ignore*/
}

And never forget the DOC type. Good luck..

Go there..
http://www.w3schools.com
http://www.smashingmagazine.com

They will teach you..

Thank sbarlow. I don't think there is solution for this problem. The buttons was formed depends on the browser, and every browsers have different style of buttons. My solution was using another inline elements as button, likes anchor link or span. Anchor link is better, because it can carry information likes form. Here is example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<title>Button With Style</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: normal 11pt/100% Arial,Verdana,Sans-serif;
	color: #1b1b1b
	}
a {
	text-decoration: none;
	color: #FFF;
	background: #000;
	padding: 4pt 7pt;
	margin: 1.4em 3pt 0;
	float: left; 
	display: block 
	}
a:hover {
	background: #494949 }
</style>
</head>
<body>
	<a href="javascript:void(0)" onclick="alert('Button With 

Style');return false;">Submit</a><a href="javascript:void(0)" 

onclick="alert('Button With Style');return false;">Cancel</a>
</body>
</html>

Thank a lot for reply. I hope you'll enjoy it.

Are you using the list-item and image as list-style-image? I think so, this is very hard to control the position of the list-item to the same result for all browsers. I don't like to use list-style-image. Use the image as background of the list-item and give them vertical position of 50% and it'll fine on all browsers. Here is example:

CSS:
ul {
list-style: none; margin: 0; padding: 0 /* margin and padding were not the same in all browsers, I set 0 for the same result */; width: auto }
ul li {
list-style: none; margin: 0; padding-left: 1.4em; background: url('list-item.gif') no-repeat 3pt 50%; line-height: 2.4em }

HTML:
<ul>
	<li><a href="#">ON Time</a></li>
	<li><a href="#">Per Specification</a></li>
	<li><a href="#">ON Cost</a></li>
	<li><a href="#">Shared Risk</a></li>
</ul>

You can also use the image for the anchor link background.

a {background: url('list-item.gif') no-repeat 0 50% }

Good luck...