Member Avatar for jreddick82

Hello,
I have a website that I designed. All the coding is checked with W3C for both HTML and CSS. I have also changed the DOCTYPE around to try different types and nothing seems to work. When you pull the website up on windows Vista whether it is IE or Firefox, the page is all out of alignment and nothing is work properly. Can someone please assist with this? Here is the coding:

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

<head>

  <title></title>
  <style type="text/css">

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin : 0;
padding : 0;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
fieldset, img {
border : 0;
}
body {
font-family : Arial, Helvetica, sans-serif;
color : #333333;
background-color : #93161a;
text-align : center;
font-size : medium;
}
#wrapper {
width : 1050px;
text-align : left;
margin-right : auto;
margin-left : auto;
background-image : url(spottedred.jpg);
background-repeat : no-repeat;
background-position : center top;
margin-top : -1px;
padding-top : 1px;
}
#logo {
background-image : url();
background-repeat : no-repeat;
background-position : left center;
height : 82px;
margin-top : 13px;
position : relative;
margin-left : 20px;
}
#headline-bar {
background-image : url(bar.png);
background-repeat : repeat-x;
background-position : center;
width : 100%;
position : absolute;
top : 10px;
height : 200px;
left : 0;
z-index : 100;
}
#headline-bar h1 {
font-size : 33px;
color : #ffffff;
margin-top : 10px;
}
#content-wrapper {
margin-top : 75px;
background-color : #ffffff;
border : solid;
}
#content-box-top {
background-image : url(images/content-box-top.gif);
background-repeat : no-repeat;
height : 5px;
padding-bottom : 20px;
background-position : center top;
}
#content-box-bottom {
background-image : url(images/content-box-bottom.gif);
background-repeat : no-repeat;
height : 5px;
padding-top : 20px;
background-position : center bottom;
}
#wrapper-2-for-bottom-bg {
background-image : url(images/spotted-bg-2.jpg);
background-repeat : no-repeat;
background-position : center bottom;
padding-bottom : 18px;
}
#col-left {
float : left;
width : 341px;
margin-left : 23px;
display : block;
}
#col-left h2 {
font-size : 27px;
font-weight : bold;
color : #93161a;
}
.clear {
clear : both;
height : 1px;
}
#footer {
color : #ffffff;
margin-top : 18px;
padding-right : 15px;
padding-left : 15px;
}
#col-left h3 {
font-size : 25px;
font-weight : bold;
background-color : #ffff33;
color : #000000;
width : 230px;
margin-top : 5px;
}
#col-left h4 {
font-size : 17px;
color : #000000;
margin-top : 9px;
margin-bottom : 15px;
}
#col-right {
width : 400px;
margin-left : 245px;
margin-top : 95px;
border : thin;
}
#content {
width : 430px;
}
#content h2 {
border-top : 1px solid #eee;
border-bottom : 1px solid #eee;
font-size : 1.15em;
font-weight : bold;
margin-top : 10px;
margin-right : 0;
margin-bottom : 10px;
margin-left : 0;
padding-top : 5px;
padding-right : 0;
padding-bottom : 5px;
padding-left : 0;
width : 400px;
}
#bottom {
padding-right : 0;
padding-left : 165px;
}
fieldset {
border : 0;
padding : 0 0 0;
}
p {
margin : 0 0 1em;
font-size : 83%;
}
th {
padding : 3px 15px 3px 3px;
text-align : left;
}
td {
font : 72%/125% Arial, Sans-Serif;
}
#free-shipping-starburst {
background-image : url(images/105-value.png);
background-repeat : no-repeat;
height : 122px;
width : 122px;
position : absolute;
left : -175px;
top : 85px;
}
#price-starburst {
background-image : url(images/price-starburst-1499.png);
background-repeat : no-repeat;
height : 139px;
width : 140px;
position : absolute;
left : 898px;
top : 482px;
}
#headline-text-container {
margin-right : auto;
margin-left : auto;
position : relative;
width : 850px;
}
#bottles {
background-repeat : no-repeat;
position : absolute;
left : 515px;
top : 175px;
}
#aloe {
background-repeat : no-repeat;
position : absolute;
left : 1118px;
top : 173px;
}
#bottle {
background-repeat : no-repeat;
position : absolute;
left : 150px;
top : 492px;
}
</style>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a" >   <!-- IE5 mode --> 
  <meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
  <meta name="created" content="Wed, 30 Dec 2009 19:28:42 GMT" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
</head>
<body>
<div id="bottle"><img src="4bottlebanner.jpg" width="295"
  height="500" alt="" title="" border="0"  /></div>

  <div id="aloe"><img src="aloecorners.jpg" width="77" height=
  "117" alt="" title="" border="3" /></div>

  <div id="bottles"><img src="bottles.jpg" width="293" height=
  "220" alt="" title="" border="0"  /></div>

  <div id="headline-bar">
    <img src="barlg2.png" width="850" height="100" alt="" title=""
    border="3"  />

    <div id="headline-text-container"></div>
      <div id="price-starburst"><img src="better.jpg" width="295"
      height="500" alt="" title="" border="0"  /></div>
    </div>
  

  <div id="wrapper">
    <div id="wrapper-2-for-bottom-bg">
      <div id="logo">
        <div id="logo-text"></div>
      </div>

      <div id="content-wrapper">
        <img src="aloecorners.jpg" width="77" height="117" alt=""
        title="" border="3" align="top" />

        <div id="content-box-top"></div>

        <div id="col-abmiddle"></div>

        <div id="col-right">
          <img src="log2.png" width="554" height="80" alt=""
          title="" border="3"  /><br />
          <br />

          <div id="free-shipping-starburst"></div>

          <div id="content">
            <div id="bottom">
              <!-- Start of FORM -->

              <form method="get" action=
              "http://www.rotatemarketing.com/home.html" >
                

                <p><br />
                <br />
                <br />
                <br />
                <span>First Name:</span> <input type="text" name=
                "first" /><br />
                <br />
                <span>Last Name:</span> <input type="text" name=
                "Last" /><br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span>Email:</span> <input type="text" name=
                "email" /><br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Phone:</span>
                <input type="text" name="number" /><br />
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="ENTER SITE" class="c1" align="left" /></p>
              </form></div>
              <!-- End Form -->

              <fieldset>
               <img src="4bottles.jpg" width="350" height="311" alt="" title="" border="0" align="right" />
              </fieldset>
            </div>

            <fieldset>
              <table>
                <tr>
                  <td></td>
                </tr>
              </table>

              <table>
                <tr>
                  <td></td>
                </tr>
              </table>
            </fieldset>
          </div>
        </div>
      </div>

      <div class="clear">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c1"><font size="1">*You are now entered into a chance to
        win our weekly $100 product giveaway from
        rotatemarketing.com!</font></span>
      </div>

      <div id="content-box-bottom">
        <br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c3"><font color="#FFFFFF">For Employment Please Email</font></span>
        <a href=
        "mailto:humanresources@rotatemarketing.com">humanresources@rotatemarketing.com</a>
      </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="c3"><font color="#FFFFFF">For Advertising please email</font>
      <a href="mailto:sales@rotatemarketing.com">sales@rotatemarketing.com</a></span>
    </div>
  
</body>
</html>
  • 3 Contributors
  • 6 Replies
  • 152 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for almostbob

this code does not validate
Xhtml is stricter than html, as well as a doctype xhtml requires <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> revalidate the code

You dont align with no break space, it doesnt work, &nbsp; is not a fixed width in comparison to other font elements
dont use tables for layout
css positioning

Pixels are for images, other elements should be sized and positioned in relative dimensions, ems and %, so they will look the same in different browsers, screen resolutions and and window sizes

Edited by almostbob because: n/a
Member Avatar for jreddick82

this code does not validate
Xhtml is stricter than html, as well as a doctype xhtml requires <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> revalidate the code

You dont align with no break space, it doesnt work, &nbsp; is not a fixed width in comparison to other font elements
dont use tables for layout
css positioning

Pixels are for images, other elements should be sized and positioned in relative dimensions, ems and %, so they will look the same in different browsers, screen resolutions and and window sizes

Can you or someone else please explain more about what is wrong? I dont understand when I validate my CSS and my HTML coding everything is correct. The px are aligning the pictures on the screen. If that is not correct please tell me.

Member Avatar for almostbob

The code you posted DOES NOT validate use the w3c validator on your code and fix the errors.
you have a string of &nbsp;&nbsp; to align items this does not work, use css text-align: attribute or css positioning to align items, (Google search for it)
html elements sized in pixels are different sizes depending on screen resolution. on this monitor with 0.09mm dot pitch 10px is .9mm high(unreadable), on another monitor 10px may be 2.5mm high (just readable)
Current best practice is to layout elements in % or em, dimensions that adjust to screen size, window size, and the user's browser settings, so that the layout is legible always
http://www.w3schools.com will teach you what you are doing wrong

Member Avatar for MidiMagic

Don't use negative sizes. You can't predict how a browser will interpret them.

Note that if the user's browser does not have the font you are using on yours, the results may be unpredictable.

Edited by MidiMagic because: n/a
Member Avatar for jreddick82

Don't use negative sizes. You can't predict how a browser will interpret them.

Note that if the user's browser does not have the font you are using on yours, the results may be unpredictable.

I have not fixed the negative but I have tried what the other poster has told me to do. i revalidated everything and it validates. I still am getting different views on all different browsers especially with people using Vista

Member Avatar for MidiMagic

I saw fixed pixel sizes in your design. That works for only one screen resolution.

The trouble may be as simple as the Vista computer having a different screen resolution (number of pixels available vertical and horizontal on the screen).

When you test your design, try opening the page in a browser that is restored down (so it doesn't fill the entire desktop). If the trouble happens there, you made your design so it works at only one screen size.

To design for varying screen resolutions, use:

em to size things relative to the font size.
% to size things relative to the screen width.

Note that you can NOT make a page that just fills the screen, and have it work on all screen resolutions, browsers, and aspect ratios. Different computers and settings will change the sizes of things.

And too many bosses expect a page that always just fills the screen. But the way the Internet works won't allow that.

Edited by MidiMagic because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.