Same code different results?

**jumpink** · 07-30-2007, 03:26 PM

I would like to have both radio selections on one line. If I separate out just the pertinent code it seems to line up. Please tell me what I am doing wrong. Thanks for any help.
1. This is the entire coe. ( notice the sticker and magnet radio selections are on separate lines

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
    height: 100%;
}
body {
    margin: 0;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    background-color: #C6CCD3;
    text-align: justify;
    vertical-align: text-top;
}
#wrap {
    position: relative;
    margin: auto;
}
/* IE6 */
* html #wrap {
    height: 100%;
    width: 900px;
}
#header {
    letter-spacing: normal;
    background-color: #708090;
    margin: auto;
    width: 900px;
}
#header h1 {
    font-size: 350%;
    color: #fff;
    margin: 0;
    background: #708090;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
    letter-spacing: normal;
}

.subtitle {
    font-size: 170%;
    color: #c6ccd3;
    padding: 4px 0 0 10px;
    margin: 0;
    background: #708090;
    color: #c6ccd3;
    font-weight: bold;
    font-style: italic;
    letter-spacing: normal;
    border-bottom-style: solid;
    border-bottom-width: thin;
}
#navtop {
    width: 900px;
}

#navtop ul{
    padding-left:0;
    margin: 0;
    color: #fff;
    float: left;
    width: 100%;
    font-family: verdana, arial, geneva, helvetica, sans-serif;
    font-size: 100%;
    background-color: #333333;
}

#navtop ul li { display: inline; }

#navtop ul li a{
    color: #C6CCD3;
    text-decoration: none;
    float: right;
    border-left: 1px solid #fff;
    outline:none;
    font-weight: bold;
    padding-top: 0.1em;
    padding-right: 2em;
    padding-bottom: 0.3em;
    padding-left: 2em;
}

#navtop ul li a:hover{color: #ffe47a;text-decoration: underline;}
    
    
#inner-wrap {
    padding-bottom: 0px;
    overflow: hidden;
    width: 900px;
    background-color: #FFFFFF;
    margin: auto;
}


#left {
    position: relative;
    right: 700px;
    float: left;
    width: 195px;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #666666;
}
#center {
    position: relative;
    left: 200px;
    float: left;
    width: 700px;
}
#greenbox {
    background-color: #9DACBF;
    color: #FFFFFF;
    padding: 5px;
    margin: 5px;
    margin-right: 102px;
    margin-top: 0px;
}
    
div#gallery {
    margin: 1px auto;
    padding: 5px;
    overflow: hidden;
    margin-left: 0px;
}
div#thumbnailtext {
    width: 408px;
    position: relative;
    float: right;
    height: 110px;
    font-size: 90%;
}
.ringspun {
    height: 28px;
}
div#productphotos {
    width: 220px;
    float: right;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    margin-top: 0px;
    margin-right: 165px;
    margin-bottom: auto;
    margin-left: auto;
    background-color: #003399;
    border: thin solid #333333;
    font-weight: bold;
}
.click2view {
    font-weight: normal;
    font-size: 70%;
}
.radio {
    font-size: 9px;
    font-weight: bold;
    color: #000000;
}
div#shirtcolors {
    width: 220px;
    float: right;
    font-weight: bold;
    text-align: center;
    margin-right: 165px;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
}
div#enlarge {
    width: 292px;
    position: relative;
    margin-top: 0px;
    font-weight: bold;
    padding-left: 0px;
    height: 100px;
}
.larger {
    color: #FF0000;
    text-align: center;
    height: 28px;
    }
.larger a:link {color: #174D77}
.larger a:hover {color: #FF0000;font-size: 110%}
.larger a:active {color: #0000FF}
div#orderhere {
    width: 220px;
    position: relative;
    font-weight: bold;
    font-size: 14px;
    background-color: #0066CC;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
    color: #FFFFFF;
    margin-left: 35px;
    text-align: center;
}
div#selectsize {
    width: 220px;
    border: thin ridge #333333;
    margin-left: 35px;
}
#selectsize form {margin:0.1em;}

div#sizechart {
    font-size: 12px;
    font-weight: normal;
    color: #000000;
}

.availcolor {
    color: #000000;
    text-align: center;
    float: left;
    width: 50%;
    margin: 0 auto 10;
    font-size: 90%;
        }

div#numbform {
    font-size: 12px;
    font-weight: bold;
}
div#numbform input{ vertical-align: middle; }

#break {
    width: 700px;
    border-bottom-width: thin;
    border-bottom-style: dotted;
    border-bottom-color: #000000;
    margin-bottom: 5px;
}
#otheritem {
    width: 244px;
    margin-left: 202px;
    margin-bottom: 3px;
}

#otheritem ul{
    padding-left:0;
    margin: 0;
    color: #000000;
    width: 100%;
    font-family: verdana, arial, geneva, helvetica, sans-serif;
    font-size: 14px;
}

#otheritem ul li { display: inline; }

#otheritem ul li a{
    color: #FF0000;
    text-decoration: underline;
    border-left: 1px solid #fff;
    outline:none;
    font-weight: bold;
    padding-top: 0.1em;
    padding-bottom: 0.3em;
    font-style: oblique;
    text-align: center;
}

#otheritem ul li a:hover{color: #FF00FF;text-decoration: underline;}
div#colors {
    overflow: hidden;
    margin-top: -10px;
    margin-right: auto;
    margin-bottom: 1px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    width: 300px;
    float: right;
}
#sticker {
    width: 200px;
    margin-left: 200px;
}
    
#itemhead {
    color: #000000;
    padding: 5px;
    margin: 5px;
    margin-right: 70px;
    margin-top: 0px;
    font-size: 18px;
    font-weight: bold;
    border-bottom-width: medium;
    border-bottom-style: groove;
    border-bottom-color: #000000;
}
#magnify {
    position:relative;
    top:10px;
    width:700px;
    background-color:#fff;
    z-index:100;
    height: 290px;
}
#magnify a.p1, #magnify a.p1:visited {display:block; width:244px; height:62px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#magnify a img {
    border:0;
    height: 290px;
    width: 290px;
}
#magnify a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#magnify a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#magnify a.p1:hover .large {display:block; position:absolute; top:25px; left:10px; width:700px; height:500px; border:10px solid #ccc;}
#gallery img {
    float: left;
    margin-left: 0px;
    color: #708090;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
}
.toggleborder:hover img{
border: 1px solid #FF6600;
}

.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}
ul#navleft {
    padding: 0;
    margin: 0;
    border-top-width: 0px;
    border-top-color: #EBE9ED;
    border-right-color: #EBE9ED;
    border-bottom-color: #EBE9ED;
    border-left-color: #EBE9ED;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin-left: 0px;
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 95%;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
}
ul#navleft li a {display: block;width: 162px;\width: 198px;w\idth: 162px;padding: 4px 8px 4px 8px;border: 0;border-left: 3px solid #ffe47a;text-decoration: none;font-weight: normal;outline:none;}

ul#navleft li a:link { color: #666666;font-weight: normal;outline:none;}

div#navcontainer li a:visited {color: #fff;}

ul#navleft li a:hover {border-color: #fff;color: #ffffff;background: #4e5965;}

leftheader {border: 1px solid #fff;background: #fff url(images/bg_leftbox.jpg) repeat-x 0% 0%;margin-bottom: 10px;}

.leftheader a,.leftbox a:link,.leftbox a:active,.leftbox a:visited {background: url(images/read_more.gif) no-repeat;height: 21px;width: 72px;color: #4e5965;font-weight: normal; text-decoration: none;text-align: center;display: block;outline: none}
.leftheader h4 {
    background-color: #8d99a6;
    color: #fff;
    margin: 0;
    padding-left: 5px;
    border-bottom: 2px solid #8D99A6;
    letter-spacing: 1px;
    font-size: 110%;
}

leftbox {border: 1px solid #fff;background: #fff url(images/bg_leftbox.jpg) repeat-x 0% 0%;margin-bottom: 10px;}

.leftbox a,.leftbox a:link,.leftbox a:active,.leftbox a:visited {background: url(images/read_more.gif) no-repeat;height: 21px;width: 72px;color: #4e5965;font-weight: normal; text-decoration: none;text-align: center;display: block;outline: none}

.button {margin: 10px 0 10px 0;}

.leftboxtext {
    padding: 5px;
    line-height: 1.5em;
    font-size: 80%;
    color: #4e5965;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #666666;
}

.leftbox h4 {
    background-color: #8d99a6;
    color: #fff;
    margin: 0;
    padding-left: 5px;
    border-bottom: 2px solid #8D99A6;
    letter-spacing: 1px;
    font-size: 110%;
}
    
#footer {
    position: relative;
    height: 30px;
    width: 900px;
    text-align: center;
    background: #4E5965;
    margin: auto;
}
.style1 {color: #FF0000}
.style4 {
    font-size: 18px;
    font-weight: bold;
    color: #FF9900;
    margin-top: 100px;
}
.style5 {font-size: xx-small}
.style6 {
    color: #000000;
    font-weight: bold;
}
</style>
</head>
<body>
  <p>
    <script type = "text/javascript"
            src="cart1.js">
    </script>
    <script type = "text/javascript"
            src="set.js">
    </script>
    <script type = "text/javascript">

var popbackground="white" 
var windowtitle="Image Window" 

function detectexist(obj){
return (typeof obj !="undefined")
}

function jkpopimage(imgpath, popwidth, popheight, textdescription){

function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}

getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{

jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title '+windowtitle+'></title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br>'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}
function enlargeName(name)
{
  if (name.indexOf('.jpg')!=-1)
  name = name.replace('.jpg','_big.jpg');
  if (name.indexOf('.jpeg')!=-1)
  name = name.replace('.jpeg','_big.jpeg');
  if (name.indexOf('.gif')!=-1)
  name = name.replace('.gif','_big.gif');
  if (name.indexOf('.png')!=-1)
  name = name.replace('.png','_big.png');
return name;
}
  </script>
  </p>
<div id="wrap">
    <div id="header">
      <h1 class="style1">MySite.com</h1>
      <div class="subtitle">Subtitle</div>
    </div>
  <div id="inner-wrap">
        <div id="navtop">
          <ul>
            <li><a href="#sitename">Contact</a></li>
            <li><a href="#sitename">About Us </a></li>
            <li><a href="index.html">Home</a></li>
          </ul>
        </div>
        <div id="center">
          <div id="itemhead">I Love NY . T-Shirt
            - <span class="style1">$5.95</span> </div>
          <div id="swap"><img src="images/white.gif" alt="Image Swap Sample" name="swap" id="im">
              <div id="thumbnailtext"><div class="ringspun">100% ring spun combed cotton fine jersey.</div>
                  <div id="productphotos">Product Photos <span class="click2view">(click to view)</span></div>
                <div id="shirtcolors"> Available Shirt Colors:
                  <div class="availcolor"> <img src="images/army_thumb.gif" alt="gray" onClick="document.swap.src='images/gray.gif'"> <br>
                  GRAY</div>
                  <div class="availcolor"> <img src="images/white_thumb.gif" alt="gray" onClick="document.swap.src='images/white.gif'"> <br>
                  WHITE</div>
                </div>
              </div>
          </div>
          
          <script>
function Validate()
{
 if(document.getElementById('size').selectedIndex < 1)
 {
    alert('Please select a size');
    return;
 }
 SetDesc ('shirt');
 SetCode ('ts00014');
 SetImg ('images/cartimage/shirt.gif');
 SetPcat (2);
 if (ReadForm (document.sizeform, true))
 CallView ();
 ClearAll ();

 document.sizeform.submit();
}
      </script>
          <div id="enlarge">
            <div class="larger"><a href="#" onClick="jkpopimage(enlargeName(document.swap.src), 520, 520, ''); return false"> Click to Enlarge</a> 
            </div>
            <div id="enlarge">
  <div id="orderhere">Place Your Order Here</div>
  <div id="selectsize">
    <form action   = "javascript: void 0;"
      method   = "post"
      onsubmit = "SetDesc ('I love NY');
                  SetCode ('b00014');
                  SetImg ('images/cartimage/s00014.gif');
                  SetPcat (1);
                  if (ReadForm (this, true))
                    CallView ();
                  ClearAll ();
                  return false;">
      1.<span class="radio">
      <input type  = "radio"
         checked = "checked"
         value = "Sticker @4.95"
         onclick="ReadForm (this.form, false);"
         name  = "r1" />
         Sticker.($4.95)</span>
         <input type  = "radio"
         value = "Magnet @6.95"
         onclick="ReadForm (this.form, false);"
         name  = "r1" />
        <span class="radio">Magnet.($6.95)</span>
      <div id="quantity"><span class="ordernum">2.</span> Choose a Quantity: &nbsp;&nbsp;
                          <input type  = "text"
         name  = "qty2"
         value = "1"
         size  = "1">
        </div>
      <div id="div2">3.
        <input name="image2" type="image" onclick="Validate();" value="add to cart" src="images/buttons/addtocart.gif"alt="" />
        </div>
    </form></div>
            </div>
          </div>
          <br>
          <br>
          <br>
           <div id="break"></div>
           <div id="otheritem">
            <ul>
              <li><a href="/newrealease.htm">Want the sticker version also?</a></li>
            </ul>
          </div>
          <div id="sticker">
           <img src="images/ilny.gif" alt="Sticker or Magnet" width="244" height="62"></div><br>
           
           <div id="break"></div>
          
          <span class="style4">Customers also bought </span>
          <p><a class="toggleborder" href="http://www.dynamicdrive.com/style/"><img src="images/image1.gif" width="162" height="162" border="1" alt=""></a><a class="toggleborder" href="http://www.dynamicdrive.com/style/"> <img src="images/image2.gif" width="162" height="162" border="1" alt=""> </a> <a class="toggleborder" href="http://www.dynamicdrive.com/style/"> <img src="images/image3.gif" width="162" height="162" border="1" alt=""> </a> <a class="toggleborder" href="http://www.dynamicdrive.com/style/"> <img src="images/image4.gif" width="162" height="162" border="1" alt=""> </a><br>
        </div>
        <div id="left">
          <ul id="navleft">
            <div class="leftheader">
              <h4>Browse by Catagory</h4>
            </div>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
            <li><a href="/link.htm">Link</a></li>
          </ul>
          <div class="leftbox">
            <h4>News:</h4>
            <div class="leftboxtext"> <span class="style1">
                <p class="button"><a href="#sitename">Read more</a></p>
              <hr class="hr" />
                <p class="button"><a href="#sitename">Read more</a></p>
            </div>
          </div>
        </div>
  </div>
  
    <div id="footer">&copy; Copyright 2007 MySite.com All Rights Reserved.</div>
</div>
</body>
</html>

2.This is the correct spacing that I would like.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#enlarge {
    width: 292px;
    position: relative;
    margin-top: 0px;
    font-weight: bold;
    height: 10px;
    margin-left: 200px;
}
div#orderhere {
    width: 220px;
    position: relative;
    font-weight: bold;
    font-size: 14px;
    background-color: #0066CC;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #333333;
    border-right-color: #333333;
    border-bottom-color: #333333;
    border-left-color: #333333;
    color: #FFFFFF;
    margin-left: 30px;
}
div#selectsize {
    width: 220px;
    border: thin ridge #333333;
    margin-left: 30px;
}
.radio {
    font-size: 9px;
    font-weight: bold;
    color: #000000;
}
</style>


</head>

<body>
<div id="enlarge">
  <div id="orderhere">Place Your Order Here</div>
  <div id="selectsize">
    <form action   = "javascript: void 0;"
      method   = "post"
      onsubmit = "SetDesc ('I love NY');
                  SetCode ('b00014');
                  SetImg ('images/cartimage/s00014.gif');
                  SetPcat (1);
                  if (ReadForm (this, true))
                    CallView ();
                  ClearAll ();
                  return false;">
      1.<span class="radio">
        <input type  = "radio"
         checked = "checked"
         value = "Sticker @4.95"
         onclick="ReadForm (this.form, false);"
         name  = "r1" />
        Sticker.($4.95)</span>
      <input type  = "radio"
         value = "Magnet @6.95"
         onclick="ReadForm (this.form, false);"
         name  = "r1" />
      <span class="radio">Magnet.($6.95)</span>
      <div id="quantity"><span class="ordernum">2.</span> Choose a Quantity: &nbsp;&nbsp;
          <input type  = "text"
         name  = "qty2"
         value = "1"
         size  = "1" />
      </div>
      <div id="div2">3.
        <input name="image2" type="image" onclick="Validate();" value="add to cart" src="images/buttons/addtocart.gif"alt="" />
      </div>
    </form>
  </div>
</div>
</body>
</html>

**Angelosanto** · 07-30-2007, 05:55 PM

Sorry, I'm not too sure about the problem you mentioned, but I think I may be able to help you in another way

The 'border' property can be used much more easily in a single line of code:

HTML Code:

border:1px solid red;

If you set that as the main part of it, and then want to change just one part of the border, you can simply add to it:

HTML Code:

border:1px solid red;
border-top-style:dotted;

Just a little tip that might help you

**jumpink** · 07-30-2007, 06:10 PM

Thanks. Dreamweaver lays it out and I am learning little by little how to code.

**Angelosanto** · 07-30-2007, 06:41 PM

Ah thats good, because its 100 times better when you code it. If you want a fantastic HTML/CSS tutorial, try W3Schools.com

Thats where I learnt it all