display problems across browsers

supaduparocka · 17-Jun-2008, 12:05 PM #1

I hate to repost, but I swear that the website is almost completed. I am learning a lot about web design though, which is a good thing.

1. Why does my site (digitalsanityservices.com) displaying fine in IE7, but not in IE6? The services list displays fine in IE6, but the main page is all screwed up.

2. I would like to put a contact form on the site, javascript I presume. I found another site with a template similar to what I'd like to use, but I couldn't change the send button to send to my e-mail. I'm hoping that that isn't an unethical approach, but eitherway, I'm not sure where to go with that.

tomdkat · 17-Jun-2008, 03:45 PM #2

1. IE7 supports web standards better than IE6. For IE6 to "behave", you'll either need to do further surgery or redesign your site with IE6, IE7, and the rest of the modern browsers in mind.

2. If the example form you saw uses a server-side form processing script, you won't be able to use that form "as is" on your site. You'll need to install a server-side processing script of your own and there are many free ones available.

You can search this forum for discussion on HTML forms to get some exposure to scripts people are using.

Peace...

JaimeL · 19-Jun-2008, 03:50 AM #3

Cross-browser compatibility is a constant enemy of mine. Are you using CSS?

tomdkat · 19-Jun-2008, 04:52 PM #4

Hey, I think I've come up with a page layout that just might work across browsers for you. Attached are screenshots of my test page in IE6 (Maxthon 2.1.1), Firefox 3, Safari 3.1, and Opera 9.5, all on Windows XP. When the browser window is maximized, they all look good the same. The main issues came when making the browser window more narrow than the "minimum width" required for all the content to layout the way you intended.

Let me know if these screenshots look like what you want.

Peace...

supaduparocka · 20-Jun-2008, 09:05 AM #5

I am using CSS.

Tomdkat, those look wonderful. I'm not even sure what to say really. Now I just have to find a server side (?) javascript code for form entry.

tomdkat · 20-Jun-2008, 09:38 AM #6

JavaScript runs in the browser, not server-side. If you wanted a server-side form processing script, you'll need to either download one or write one of your own.

There are TONS of free server-side form processors available online and they are mostly in PHP with some being in Perl. The PHP ones are very common so you might consider one of those.

When I get into the office, I'll post the HTML for the screenshots above.

Peace...

tomdkat · 20-Jun-2008, 12:29 PM #7

Ok, here is the HTML and CSS for the above screenshots:

HTML:

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 content="text/html; charset=UTF-8" http-equiv="content-type" />
  <title>Digital Sanity Professional Conmputer Services</title>

  <link rel="stylesheet" href="sanity-style.css" type="text/css" />

<!--[if IE 6]>
<style type="text/css">
#header-text {
padding-top: 0px;
}
</style>
<![endif]-->
</head>

<body>

<div class="pagebody">
<div class="header">
<div id="contact-info">Cell Phone: 717.873.3678<br />
E-mail: <a href="mailto:dustin@digitalsanityservices.com">dustin@digitalsanityservices.com</a><br />
SMS: <a href="mailto:digitalsanity@vtext.com">digitalsanity@vtext.com</a>
</div>

<p id="header-text"><span style="font-weight: bold;">Digital
Sanity Professional
Computer Services</span>
<span style="font-style: italic; margin-left: 225px;">We'll
Keep You Sane in this Digital World!</span></p>
</div>

<div>
<div class="menu">
<ul id="menu-list">
  <li class="menu-item"><a href="#">Home</a></li>
  <li class="menu-item"><a href="#">Service
List</a></li>
</ul>
</div>

<div class="content">
<h1>HOME</h1>

<div style="text-align: center;" class="photo"><img style="width: 250px; height: 214px; margin-top: 5px;" alt="The Sky is the Limit" src="index_files/sky_limit-250.jpg" />
<p style="font-style: italic; font-size: small; font-weight: bold; margin-top: 2px;">The
sky is the limit</p>
</div>

<p>We are Digital Sanity Professional Computer Services,
servicing the
Central PA region and beyond with the knowledge and skills to help
customers fulfill their digital needs. We began in 2008 with the goal
of helping our clients reach their full technological potential.
Whether it's your system, network, or any other form of electronic
hardware, we've got you covered!</p>

<p>Is your computer running slower than normal? Maybe you’d like
to get
rid of that annoying error message that you can’t even pronounce?
Whatever the problem is, we’ve got you covered. We handle Windows, Mac,
Linux, you name it, we support it! We also do desktops and laptops.
Before you go and spend your hard earned money on a new computer, call
us to see if we can make the one you have run like the one you want. </p>

<p>We also do networking for homes and small businesses. We
understand
how confusing basic networking can be, and how important it is to
secure your network to keep out unwanted intruders. We can set up your
wired or wireless network with ease, and you can feel secure knowing
that you control which people you allow on your network. </p>

<p>We also provide extensive digitizing services. We can convert
8-tracks, LP’s, and tapes to CD or MP3 format, compatible with most
popular brands of electronic music players. This can involve
restoration of the media or a straight record to digital. We also
provide photograph and slide scanning. Lastly, since your documents can
never be too secure, we’ll scan any important document to a digital
format which can be copied, backed-up and distributed as you please. We
also convert to and from any video or audio format. </p>

<p>We also type resumes, with or without a cover letter, design
logos,
file copyright papers, and type up papers. Check out our service list
for a full listing with prices. We also offer professional sound
engineering services with pricing on a case-by-case basis. </p>

<p>We do residential and commercial work, and we can take your
computer at our location or at yours.</p>

<p>Call, text, or e-mail me for a free estimate. There’s no job
to easy or too complicated.</p>

</div>
</div>

</div>

</body>
</html>

CSS:

Code:

/* Generated by KompoZer */
body {
  margin: 0px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: medium;
  background-color: #33ccff;
  background-image: url(index_files/wallpaper.gif);
  background-repeat: repeat-y;
}
.header {
  border-bottom: 1px solid black;
  display: block;
  background-repeat: no-repeat;
  background-color: white;
  padding-bottom: 0px;
  margin-bottom: 0px;
  background-position: left top;
  height: 100px;
  background-image: url(index_files/header.gif);
}
.pagebody {
  border-width: 1px;
  display: block;
}
.footer {
  display: block;
}
.menu {
  display: block;
  float: left;
  text-align: right;
  padding-right: 10px;
  width: 178px;
  padding-top: 10px;
}
.content {
  border-style: solid;
  border-color: #33ccff;
  display: block;
  margin-left: 190px;
  padding-left: 10px;
  text-align: justify;
  margin-right: 5px;
}
#contact-info {
  display: block;
  margin-left: 395px;
  font-size: small;
  padding-top: 15px;
}
h1 {
  border-bottom: 1px solid black;
}
.photo {
  float: right;
  background-color: #cccccc;
  width: 260px;
  height: 240px;
  display: block;
  margin-left: 10px;
}
#header-text {
  display: block;
  margin-left: 240px;
  font-size: smaller;
  padding-top: 5px;
  width: 770px;
}
.menu-item {
  background-image: url(index_files/button.gif);
  background-repeat: no-repeat;
  text-align: center;
  font-size: small;
  padding-bottom: 20px;
}
#menu-list {
  list-style-type: none;
}
.menu-item a {
  text-decoration: none;
  color: #ff6600;
}
.menu-item a:hover {
  color: #cc0000;
  font-weight: bold;
  font-style: oblique;
}

Of course, the locations of images referenced above will be different for you but at least you can get an idea of what I did. Of course, if anyone wants to critic and improve on the above, please do so.

Peace...

supaduparocka · 20-Jun-2008, 02:24 PM #8

do i just copy and paste the code?

What am i going to need for a contact form. is it just 1 .php file?

tomdkat · 20-Jun-2008, 02:30 PM #9

Quote:

Originally Posted by supaduparocka

do i just copy and paste the code?

Of course not.

Save a copy on your computer and compare my HTML with your HTML to see what the differences are and hopefully learn how my approach differed from your current approach. After posting the HTML and CSS above, I found another tweak I had to make to make it behave "better". The HTML and CSS above is posted purely as a guide to help you out. It's not intended to be used directly, especially if you don't understand it.

Quote:

What am i going to need for a contact form. is it just 1 .php file?

It should be a single file, which will be a script. If you prefer to use a PHP script, you can do a search on "PHP form processor" or "free PHP form processor" for links to various scripts out there.

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)