CSS - Submit Link Appearing Lower Down In Ie Than Ff

Thanks for taking the time to read my question,

I want to hide this line from IE6 and lower
Code:

padding: 0px 0px 0px 12px;

Is there something I can do to it to hide it? I need it to work in IE7, FF etc.

I'm looking on line, but I guess I'm not typing in the correct search terms, as I'm not coming up with anything.

Thanks,

Brad

If I set a height for my LIs, then IE does not increment the list item. It shows a. a. a. a. instead of a. b. c. d.

Actually it's the same for any list-style-type. It never increments the list-type, even when it's just the default style.

I couldn't find any other mention of this anywhere.

Does anybody know what causes this bug, or if there's a way to fix it?

Here is some code to reproduce:
Code:

/* CSS */
#qform ol {
            list-style-type:lower-alpha;
            }

#qform ol li {
               color:#333;
               height:25px;
               margin:10px 0;
               padding:0 0 0 20px;
               }

#qform ol li input {
                     margin:3px 5px 0 0;
                     }

#qform ol li label {
                     margin:0;
                     }

<!-- HTML -->
   <form id="qform" action="index.php" method="post">
    <fieldset>
     <ol>
      <li>
       <input type="radio" id="rada" name="answer" value="a" /><label for="rada">Once</label>
      </li>
      <li>
       <input type="radio" id="radb" name="answer" value="b" /><label for="radb">Twice</label>
      </li>
      <li>
       <input type="radio" id="radc" name="answer" value="c" /><label for="radc">Three Times</label>
      </li>
      <li>
       <input type="radio" id="radd" name="answer" value="d" /><label for="radd">A Lady</label>
      </li>
     </ol>

     <input type="submit" value="OK" />
    </fieldset>
   </form>

In IE6, that will display a list with a, a, a, a. Remove the height from #qform ol li and it works as it should.

Thanks,

Hi everyone,

In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up.

Can someone look at the CSS below and let me know where I'm screwing up? Thanks!

The site is romanceplaybook dot com and here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

Hi;
i am trying to write a register form for user.

i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all.

And this problem happens in the IE browser, not in the Firefox browser.

Could anyone help me find out the problem, please.

please go to the link.
http://writeanything.org/Register.php

valid password
1) at least 8 char
2) at one lower char
3) at least one upper char
4) at least one digit

please fill some invalid input to see the different before and after that.

my code as following:

Register.php

PHP Code:
<?php
   session_start();

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
<head>
<title>  Welcome to login  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type="text/css">
body{
   padding: 0px;
   margin: 0px;
   border: 0px;
   background-color: white;
}
#container{
   padding: 0px;
   border-top: 2px solid #1d2add;
   border-bottom: 2px solid #1d2add;
   border-left: 1px solid #3b44b5;
   border-right: 1px solid #3b44b5;
   margin-left: auto;
   margin-right: auto;
   margin-top: 5%;
   margin-bottom: auto; 
   width: 330px;
   height: 370px;

}

#t1{
    font-weight: bold;
    font-size: 18px;
    color: white;
    background-color:#3542eb;
}

form{
    padding:0px;
    border: 0px;
    margin: auto;
    width: 280px;
}

#JoinMe
{
   background-color: #41ac1c;
   padding: 2px;
   border: 2px solid #94e07a;
   color: white;
   font-size: 12px;
   font-weight: bold;
}

#JoinMe:hover
{
  background-color: #237516;
  border: 2px solid #104108;
  padding: 2px;
}

table{
   padding: 0;
   border: 0;
   margin: 0;
}

tr{
   padding: 0;
   border: 0;
   margin: 0;
}

td{
   padding: 0;
   border: 0;
   margin: 0;
}

.errorM{
    padding:0;
    margin:0;
    font-weight: bold;
    font-size: 12px;
    color: red;
    background-color:white;
}
</style>
</head>
<body>     
<div id="container">
 <form action="/RegisterP2.php" method="post">
      <table>

      <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr>

      <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?>

      <tr><td>
      Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") {
                     echo "<span class=\"errorM\">";
                     echo $_SESSION['register_errorM_Email']; 
                     echo "</span>";
                  }
       ?></td></tr>

       <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="")
                                      {
                                         echo "<span class=\"errorM\">";
                                         echo $_SESSION['register_errorM_Password']; 
                                          echo "</span>";
                                       }
                          ?></td></tr>

       <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="")
                                    {
                                        echo "<span class=\"errorM\">";
                                        echo $_SESSION['register_errorM_Password'];    
                                         echo "</span>";                      
                                     }
                         ?></td></tr>
   
       <tr><td colspan="2"><hr></td></tr>

      <tr><td>
      Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr>

      <tr><td>
      First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr>

      <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr>

       <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr>


       <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr>
   <tr><td colspan="2"><hr></td></tr>

       <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr>

     <tr><td>Gender:</td><td><input type="radio" checked="checked"
name="Sex" value="male">Male <input type="radio" checked="checked"
name="Sex" value="female">Female </td></tr>
<tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr>
    
</table>
</form>
</container>
</body>
</html>





/////////////////

RegisterP2.php

PHP Code:
<?php
   session_start();

   //error massage for validate form
   $_SESSION['register_errorM_Email']="";
   $_SESSION['register_errorM_Password']="";

 
  //flag to check user input, 1=valid, 0=invalid
   $_SESSION['register_flag']=1;

   if(isset($_POST['Join'])){
        $email_pattern = '#.*@.*\..*#';
        $_SESSION['register_email']   = $_POST['email'];

       //email pass validation;
        if (preg_match($email_pattern, $_POST['email']) > 0) {
        }
        else{
            //not validate
           $_SESSION['register_errorM_Email']="**";
           $_SESSION['register_email']   ="";
           $_SESSION['register_flag']=0;
         }

      $password1 = $_POST['pass1'];
      $password2 = $_POST['pass2'];

      //valid 
      if ($password2==$password1) {
        
      } else {
        $_SESSION['register_errorM_Password']="**";
        $_SESSION['register_flag']=0;
     }

    //valid
     if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1))   
     {
     } else {
         $_SESSION['register_errorM_Password']="**";
         $_SESSION['register_flag']=0;
     }

     //valid
     if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2))     
     {
       } else {
        $_SESSION['register_errorM_Password']="**";
         $_SESSION['register_flag']=0;
      }

     if( $_SESSION['register_flag']==1)
        header('Location:RegisterP3.php');
     else
       header('Location:Register.php');
  }
?>

Thanks for taking the time to read my question.

I have a <div id="theheader"> area at the top of my page. Below that I have another <div id="contentbox"> area to which I have applied a negative margin. It displays perfectly in Fire Fox (as you would expect) but in IE the <div id="contentbox"> with the negative margin slips behind the top <div id="theheader">.

How can I get the page to display in both browsers the way FF does.?

Thanks,

Brad

CSS
Code:

@charset "iso-8859-1";

body {
background-color: #435371;
margin: 0px;
}

#theheader {
width: 100%;
height: 150px;
background-color: #FFF3D5;
}

#navbox {
width: 12%;
height: 300px;
float: left;
background-color: #435371;
color: white;
line-height: 20px;
text-align: right;
padding-right: 8px;
padding-top: 10px;
margin-right: 40px;
}

#mainbox {
width: 100%;
float: left;
color: white;
background-color: #435371;
}

#contentbox {
width: 70%;
float: left;
background-color: white;
color: black;
margin-top: -125px;
border-style: solid;
border-width: 5px;
border-color: white;
}

#contentheaderbox {
background-color: #435371;
height: 40px;
padding: 3px;
color: white;
font-weight: bold;
font-size: 40px;
}

ul.nav {
list-style-type: none;
}

a.mainnav:link {
color: white;
text-decoration: none;
}

a.mainnav:visited {
color: aqua;
text-decoration: none;
}

a.mainnav:hover {
color: #FFFFCC;
text-decoration: underline;
}

a.mainnav:active {
color: green;
font-weight: bold;
text-decoration: none;
}

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lyndon and April Berg Construction and Finishing</title>
<meta name="description" content="Welcome to Berg Construction and Finishing. This site has information about the company, type of work they do, and examples of past projects.">
<meta name="keywords" content="residential, construction, interior, finishing, cement, concrete, framing, finished carpentry, national association of home builders, home, house, driveway, stamp, drywall, taping, cabinet, Winnipeg, Landmark, Manitoba, Canada">
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<link href="LABCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="theheader">Sampson and Son</div>
<div id="mainbox">
<div id="navbox">
<a class="mainnav" href="LAB.html">Framing<a><br />
<a class="mainnav" href="LAB.html">Cement<a><br />
<a class="mainnav" href="LAB.html">Drywall<a><br />
<a class="mainnav" href="LAB.html">Finished Carpentry<a><br />
<a class="mainnav" href="LAB.html">Brick and Tile<a><br />
<a class="mainnav" href="LAB.html">Taping<a><br />
</div>
<div id="contentbox">
<div id="contentheaderbox">Home</div>
<ol>
<li>pictures of past jobs</li>
<li>company credo</li>
<li>company logo</li>
<li>contact information</li>
<li>are you a part of any associations?</li>
<li>links to association sites (reciprocal)</li>
<li>types of work Lyndon does</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
</ol>
</div>
</div>
</body>
</html>

I have a div called #Nav and inside it I have created a horizontal list. The issue is unless I set the height of the Nav div to like 40px the text shows up below the div OR the entire Div gets shifted down. Its like there is a margin or padding somewhere by default that i have not unset.

Code:

<div id="header">
	<div id="wrapper">
    	<div id="navcol1"></div>
		<div id="navcol2">Insert List with Links </div>
	</div>
</div>

<div id="nav">
    <center>
		<ul class="nav">
  			<li class="nav"><a href="#home" class="nav">XRPpro</a></li>
  			<li class="nav"><a href="#home" class="nav">X-Ray Equipment</a></li>
  			<li class="nav"><a href="#home" class="nav">QuickSOAP Touchnotes</a></li>
        	<li class="nav"><a href="#home" class="nav">Online Courses</a></li>
  			<li class="nav"><a href="#home" class="nav">Chiro Marketing</a></li>
  			<li class="nav"><a href="#home" class="nav">Bohnology</a></li>
		</ul>
    </center>
</div>

Code:

#header {
	width:100%;
	height:160px;
	background-image:url(Images/header_background.jpg);
	margin-bottom:0px;
}
#nav {
	width:100%;
	background-color:#343434;
}
ul.nav	{
	list-style-type: none;
}
li.nav	{
	display: inline;
	margin-right:15px;
	font:"Century Gothic", Verdana, Geneva, sans-serif;
	font-size:12px;
}

example, look in middle of page (blank space)

it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this.

heres the code:
php Code:
Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> ";

  

 $i = 0;


         


         $gamesperpage = 50;


         $adplaced = false;


         


         // display game boxes      


         $a = 2;


         


         foreach ($games as $game) {


             display_gamebox('float='.$a.'&display=rating', $game);


             if($a == 2) $a = 1;


             else $a++;


             


             if(!$adplaced && $i >= count($games)/2  && $a == 2) {


                 echo '


                 <div class="clearboth clearafter aligncenter">


                     <script type="text/javascript">


                     <!--google_ad_client = "pub-5687621631516277";


                     /* 468x60, created 3/18/08 */


                     google_ad_slot = "1797650152";


                     google_ad_width = 468;


                     google_ad_height = 60;


                     //-->


                     </script>


                     <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js">


                     </script>


                 </div>'; 


                 $adplaced = true;


             }


             $i++;


         } // end of foreach game


         


         echo "


         <div class='clearboth'><hr></div>


         "; 

Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php

I've fiddled with the widths and container widths with no luck.

Can anyone tell me why this is happening?

thanks
-Sean

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

I'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them.

I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one.

The working page is:
Code:

<html>
<head>
<title> Under Construction </title>
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<table class="main">

<tr class="header">
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<th class="right">&nbsp;</th>
</tr>
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		<h4 class="heading">Coming Soon!!</h4>
		<hr class="pagebreak" />
		<p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p>
		<h4 class="heading">Update: April 6, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p>
		<p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p>
		<h4 class="heading">Update: April 4, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p>
	</td>
	<td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" />
	<hr style="width:150px;" />
	<p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding"</p>
	<hr style="width:150px;" />
	<a href="aboutus.php"> About Us </a>
	</td>
</tr>
<tr >
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
	<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

The dysfunctional page is:
Code:

<!-- XHTML 1.1 -->

<!-- Document Start -->
<html>

<!-- Head -->
<head>

<!-- Title -->
<title>  </title>

<!-- Style Sheet -->
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />

<!-- Charset UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- PHP Includes -->
</head>
<!-- End Includes -->
<!-- Body -->
<body>

<!-- Main Table -->
<table class="main">
<!-- First Row - Header -->
<tr class="header">
	<!-- Start Banner -->
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<!-- End Banner -->
</tr>
<!-- End First Row -->
<!-- Second Row - Content -->
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		&nbsp;
	</td>
</tr>
<!-- End Second Row -->
<!-- Third Row - Footer -->
<tr>
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
</tr>
<!-- End Third Row -->
</table>
<!-- End Table -->
</body>
<!-- End Body -->
</html>
<!-- End Doc -->

The css is:
Code:

body
{
 color:#333333;
 background-color:#FFFFFF;
 margin:0px;
 padding:0px;
}

hr.pagebreak
{
 width:450px;
 color:#550072;
}

.subHeading
{
 color:#8A00B8;
 font-size:18px;
}

ul.navlist
{
 display:inline;
 list-style-type:none;
 margin:0px;
 padding:0px;
}

a.navlink:link
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:visited
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:hover
{
 color:#FFFFFF;
 background-color:#8A00B8;
 text-decoration:none;
 margin:0px;
 padding-right:2px;
}

tr
{
 vertical-align:top;
}

table
{
 margin-left:auto;
 margin-right:auto;
 margin-bottom:0;
 margin-top:0;
}

table.main
{
 background-color:#FFFFFF;

}

th.left
{
 width:150px;
}

th.center
{
 width:500px;
}

th.right
{
 width:150px;
}

a.navhead:link
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

a.navhead:visited
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

div.navhead
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

h4.heading
{
 display:block;
 margin:0px;
 padding-right:30px;
 color:#550072;
 text-indent:15px;
 text-align:right;
 font-size:24px;
}

img
{
 display:block;
 margin:0;
 padding:0;
}

p.cblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
}

p.fblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
 text-align:center;
}

.footer
{
 text-align:center;
}

#navMenu
{
 height:300px;
}

h1.MainHeading
{
 font-size:50px;
 color:#550072;
 text-align:left;
}


#img
{
 background-image:url("../images/purple-150x150-clear.jpg");
 background-repeat:no-repeat;
 height:150px;
 width:150px;
}
img.cssscriptimg
{
 display:inline;
}

#portrait
{
 width:150px;
}

p.iblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:150px;
}

The navigation script is below:
PHP Code:
<?php
// This is a simple script to insert the navigation pane into every page

function echoNav ()
{
    // color changer
    //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />";
    //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />";
    //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />";

    // navMenu devision
    echo "<div id=\"navMenu\">\n";
    
    // Section List
    echo "<ul class=\"navlist\">\n";

    // First section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n";

    // First link list
    echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n";
    echo "</ul>\n";

    // End first section
    echo "</li>\n";

    // Second Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n";
    echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Second Section

    // Third Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n";
    echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Third Section

    // Fourth Section
    echo "<li>";
    echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n";
    echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Fourth Section

        // End Section List
        echo "</ul>\n";

        // End navMenu
        echo "</div>\n";

    // Stats
    echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n";

    // Scripts
    echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n";
    // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n";
}

?>




Note:
I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected.

Any help would be very appreciated 8-)

Hi,
I want to make some text "appear" when hovering over a different set of text:

e.g.
The "Hover here" text is always apparent on the page. If you hover your mouse over it the "Text to appear" text...appears!

Hover here - Text to appear

How can I do this?

Thanks, Ian

Hi there,
I have reached the end of my ability to figure out fixes for my problem. I can see it must be something obvious that is creating my inconsistency across browsers, but I can't seem to figure it out.
In IE all the items appear correctly but it is pushed over really far to the right and creates a scroll bar. It appears as I would like in Firefox.
I would really appreciate some suggestions so I can get my cross-browser learning further along!
my site: http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm
my css:
body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #999999;
text-align: center;

}
a {
text-decoration: none;
color: #43709e;
outline: none;
font-size: 12px;

}
a:visited {
color: #990000;

}
a:active {
color: #43709e;

}
a:hover {
color: #e7d77e;
text-decoration: underline;

}
a.nav {
text-decoration: none;
color: #000000;
outline: none;
font-size: 12px;
}
a.nav:visited {
color: #0000000;
}
a.nav:active {
color: #000000;
}
a.nav:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
text-align: left;

}
.navText{
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
width: 93px;

}
#title{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
position: absolute;

}
#navBox{
background-color: #CCCCCC;
border-right: 1px dashed #000000;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
border-left: 1px dashed #000000;
margin-top: -380px;
margin-bottom: 0px;
margin-right: 5px;
margin-left:0px;
position: relative;
float: right;
clear: right;
padding: 10px 10px 10px 10px

}
#rightBox {
border-right: 2px solid #666666;
width:650px;
height: 510px;
border-top: 2px solid #666666;
border-bottom: 2px solid #666666;
border-left: 2px solid #666666;
margin-top:60px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:200px;
background: #ffffff;
position: absolute;

}
#subTitle{
margin-top: 5px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:5px;
float: left;
clear: left;
position: relative;

}
#drawing{
margin-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
position: relative;

}
.mainPic {
margin-top: 117px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 150px;
position:absolute;
float: left;
clear: left;

}
#smallPic {
margin-top: -455px;
margin-bottom: 0px;
margin-right:-150px;
margin-left: 0px;
position:relative;

}
img.pic{
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;

}


Many, many thanks!!!

I must be missing the obvious?

I have created an image that I want to tile vertically in the body of my document. So I have created a style for body in a linked css file with the following:

body {
background-image:url(image/background.gif);
background-repeat: repeat-y;
}

In Design view in Dreamweaver, the image has the desired effect and tiles no problems, however when I go to preview it in the browser, the image does not appear.

I have checked that the path of the image is correct in relation to the index.html page.

Everything is saved on the desktop just now because I am experimenting with the technique, so in desktop I have the index.html and the image file (with the background.gif) in it. Oh and the css file is on the desktop too. I have also tried embeddeding the style rule in the head of the index.html and it still wont work.

Would someone put me out of my misery please

dmlocke

Hello, if you visit http://tombraiders.net/katie/alison/index2.html you'll see the site I'm working on. (User: letme Pass: in)

I want to put a background image within the container that all the body copy resides.

I've tried editing the CSS file, located at http://www.tombraiders.net/katie/al...tyle_screen.css under "container3" however nothing ever appears.

The image I'm trying to link right now is located under the img folder at the path img/image.jpg -- it's just a test image I want to use for now to see if I can get one working at all.

Any help would be great! Not sure why it's not showing up. Thanks