...

View Full Version : Odd Spacing Problem in HTML



writingalive
12-26-2009, 09:56 PM
I'm having a hard time getting my website to look right in Internet Explorer. I usually use a Mac and Safari or Firefox to view the page as I edit. When I open it with Internet Explorer 8 in on my PC, I get some really weird spaces all over the page. Any ideas would be GREATLY appreciated! Here are two examples of the spacing problems:

http://writingalive.com/curriculum.html

http://writingalive.com/grades/1st/1stindex.html

This is my first time posting and I don't know if it's proper etiquette to post the entire code or a link. Thank you for your help!

Bobby

Excavator
12-26-2009, 11:20 PM
Hello writingalive,
Posting code is fine but a link always works best.

The first thing I would suggest you do is add a DocType. See the link about DocTypes in my sig below.
Here's what I would suggest -
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

many_tentacles
12-26-2009, 11:36 PM
Take a look in your stylesheet...

You might want to remove the following bits (in red)...




#body {
color:#000033;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 0px;
border: 0px;
}

table.sample {
border-style: none;
border-color:#0099cc;
border-width: thin;
}

#bottom_link {
font: 14px Verdana, Arial, Helvetica, sans-serif;
}

a:link {
color:#0000ff;
text-decoration:none;
}

a:visited {
color:#0000ff;
text-decoration:none;
}

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

a.bottom_link {
color:#003399;
text-decoration:none;
}

a.bottom_link:hover {
color:#3399cc;
text-decoration:underline;
}

a.top {
color:#ffffff;
text-decoration:none;
}

a.top:hover {
color:#c0c0c0;
text-decoration:underline;
}

a.side_title {
color:#ff0000;
text-decoration:none;
}

a.side_title:hover {
color:#0000ff;
text-decoration:underline;
}

h1 {
color: #990000;
font-size: 15px;
font-weight: bold;
border-bottom-width: 1px;
border-color: #E0E0E0;
border-left-width: 0px;
border-right-width: 0px;
border-style: solid;
border-top-width: 0px;
}

<style type="text/css">
table.sample {
border-width: 3px;
border-spacing: ;
border-style: solid;
border-color: gray;
border-collapse: separate;
background-color: rgb(255, 255, 240);
}
table.sample th {
border-width: 0px;
padding: 5px;
border-style: none;
border-color: gray;
background-color: rgb(255, 255, 204);
-moz-border-radius: ;
}
table.sample td {
border-width: 0px;
padding: 5px;
border-style: none;
border-color: gray;
background-color: rgb(255, 255, 204);
-moz-border-radius: ;
}
</style>

jonweb2009
12-27-2009, 10:48 PM
in th first row 3 rd coloumn you have added table to insert two images, and the top image is causing problems to view properly in the ie.

rather using you can try two div tags, or just 2 img with a break.


more html tutorials

http://www.******************



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum