Hey Everyone,
I have designed a website, originally using DIV's, and a few tables, but then I have run into this glitch. It reminds me of the 3px jog, but I have removed all the div's now and it is still happening!! I hope that someone can help me. I have made the site a 3 colum layout. I have been pulling my hair out all day over this.
If you look at the right side in IE, there are a few pixels of whitespace. In Mozilla, there isn't.
Here is the address:
<!-- m --><a class="postlink" href="http://www.ohlman.com/gop/index.html">http://www.ohlman.com/gop/index.html</a><!-- m -->
Here's the CSS:
body {
margin: -2px;
}
#nav {
width: 105px;
height: 600px;
border-right-style: solid;
border-right-width: 1px;
margin-left: 5px;
float: left;
}
#body {
width: 750px;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;
}
#main {
margin: 5px;
margin-left: 5px;
width: 350px;
float: left;
}
#left {
margin: 5px;
margin-left: 5px;
float: left;
}
#right {
height: 600px;
margin: 5px;
}
td.blue {
background: #304890;
border-top-style: solid;
border-top-width: 1px;
border-top-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
height: 25px;
width: 14%;
}
td.red {
background: #DD002E;
border-style: solid;
border-width: 1px;
border-color: black;
height: 25px;
width: 14%;
}
* html table.nav {
font-family: verdana, arial, sans-serif;
color: white;
font-size: 10pt;
width: 750px;
margin-top: -4px;
}
tr.copyright {
background: #304890;
width: 100%;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
color: white;
}
a.copyright {
color: white;
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
}
a.copyright:hover {
color: #DD002E;
text-decoration: underline;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
}
a.calender {
font-family: arial, sans-serif;
font-size: 10pt;
color: #304890;
text-decoration: none;
}
a.calender:hover {
font-family: arial, sans-serif;
font-size: 10pt;
color: #304890;
text-decoration: underline;
}
a.blue {
font-family: verdana, arial, sans-serif;
color: white;
font-size: 10pt;
text-decoration: none;
}
a.blue:hover {
font-family: verdana, arial, sans-serif;
color: #DD002E;
font-size: 10pt;
text-decoration: none;
}
a.red {
font-family: verdana, arial, sans-serif;
color: white;
font-size: 10pt;
text-decoration: none;
}
a.red:hover {
font-family: verdana, arial, sans-serif;
color: #304890;
font-size: 10pt;
text-decoration: none;
}
Thanks, Matthew!That's usually an indication you've got some td content wrapping in your HTML. BTW, that's some really badly structured HTML. Has anyone ever told you a document consists of a series of paragraphs in sections introduced by headings that describe the topic of the paragraphs that follow?
I have designed a website, originally using DIV's, and a few tables, but then I have run into this glitch. It reminds me of the 3px jog, but I have removed all the div's now and it is still happening!! I hope that someone can help me. I have made the site a 3 colum layout. I have been pulling my hair out all day over this.
If you look at the right side in IE, there are a few pixels of whitespace. In Mozilla, there isn't.
Here is the address:
<!-- m --><a class="postlink" href="http://www.ohlman.com/gop/index.html">http://www.ohlman.com/gop/index.html</a><!-- m -->
Here's the CSS:
body {
margin: -2px;
}
#nav {
width: 105px;
height: 600px;
border-right-style: solid;
border-right-width: 1px;
margin-left: 5px;
float: left;
}
#body {
width: 750px;
border-right-style: solid;
border-right-width: 1px;
border-right-color: black;
}
#main {
margin: 5px;
margin-left: 5px;
width: 350px;
float: left;
}
#left {
margin: 5px;
margin-left: 5px;
float: left;
}
#right {
height: 600px;
margin: 5px;
}
td.blue {
background: #304890;
border-top-style: solid;
border-top-width: 1px;
border-top-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: black;
height: 25px;
width: 14%;
}
td.red {
background: #DD002E;
border-style: solid;
border-width: 1px;
border-color: black;
height: 25px;
width: 14%;
}
* html table.nav {
font-family: verdana, arial, sans-serif;
color: white;
font-size: 10pt;
width: 750px;
margin-top: -4px;
}
tr.copyright {
background: #304890;
width: 100%;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
color: white;
}
a.copyright {
color: white;
text-decoration: none;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
}
a.copyright:hover {
color: #DD002E;
text-decoration: underline;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
}
a.calender {
font-family: arial, sans-serif;
font-size: 10pt;
color: #304890;
text-decoration: none;
}
a.calender:hover {
font-family: arial, sans-serif;
font-size: 10pt;
color: #304890;
text-decoration: underline;
}
a.blue {
font-family: verdana, arial, sans-serif;
color: white;
font-size: 10pt;
text-decoration: none;
}
a.blue:hover {
font-family: verdana, arial, sans-serif;
color: #DD002E;
font-size: 10pt;
text-decoration: none;
}
a.red {
font-family: verdana, arial, sans-serif;
color: white;
font-size: 10pt;
text-decoration: none;
}
a.red:hover {
font-family: verdana, arial, sans-serif;
color: #304890;
font-size: 10pt;
text-decoration: none;
}
Thanks, Matthew!That's usually an indication you've got some td content wrapping in your HTML. BTW, that's some really badly structured HTML. Has anyone ever told you a document consists of a series of paragraphs in sections introduced by headings that describe the topic of the paragraphs that follow?