Hi everyone,

I'm really hoping that someone can help me out. I am in the process of making this site and I got the first template down....well almost. It works pretty much perfect in Firefox and Netscape however there is a black line that goes through the middle of the page on IE! You can see it here:

http://www.swallow-studios.com/testi...nd/ratouttours

I have gone through the HTML and can see absolutely nothing that would cause it nor can I in the CSS! I was wondering if anyone had any ideas because I don't want to have to start the template again.

The CSS goes as follows:

.class1 A:link {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.class1 A:visited {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.class1 A:active {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.class1 A:hover {
color: #B3D11B;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.class2 A:link {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class2 A:visited {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class2 A:active {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class2 A:hover {
color: #718511;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class3 A:link {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class3 A:visited {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class3 A:active {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.class3 A:hover {
color: #B3D11B;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.ad_dark {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
background-color: #232323;
}
.nav_top {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #232323;
padding-right: 5px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #B3D11B;
padding-left: 5px;
}
.main_nav {
background-image: url(../i/d/bg_nav.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
}
.spacer_green {
background-color: #B3D11B;
background-image: url(../i/d/spacer_green.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
padding-right: 50px;
text-align: right;
vertical-align: bottom;
}
.border_west {
background-image: url(../i/d/border_west.gif);
background-repeat: repeat;
}
.border_east {
background-image: url(../i/d/border_east.gif);
background-repeat: repeat;
}
.cell_white {
background-color: #FFFFFF;
}
.cell_subject {
font-family: "Trebuchet MS", Arial;
font-size: 16px;
font-weight: bold;
text-transform: capitalize;
color: #666666;
background-color: #CCCCCC;
padding-right: 10px;
padding-left: 10px;
}
.nav_bottom {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-image: url(../i/d/nav_bottom.gif);
padding-right: 10px;
padding-left: 10px;
}
.border_southwest {
background-image: url(../i/d/border_southwest.gif);
}
.border_south {
background-image: url(../i/d/border_south.gif);
}
.border_southeast {
background-image: url(../i/d/border_southeast.gif);
}
.cell_dark {
background-color: #232323;
padding-right: 10px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
.skyscraper {
background-color: #FFFFFF;
vertical-align: top;
padding-top: 5px;
}
.h1 {
font-family: "Trebuchet MS", Arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: #666666;
}
.basebottom {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding-left: 15px;
text-align: center;
}
.searchfield {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
background-color: #232323;
border: 1px solid #CCCCCC;
}
.bio_pic {
vertical-align: bottom;
background-color: #FFFFFF;
text-align: center;
padding-top: 10px;
}
.cell_video {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
vertical-align: top;
text-align: center;
background-image: url(../i/d/downcell.gif);
background-repeat: no-repeat;
background-position: bottom;
background-color: #CCCCCC;
padding-top: 10px;
}
.cell_links {
vertical-align: top;
background-color: #CCCCCC;
padding: 10px;
font-family: "Trebuchet MS", Arial;
font-size: 16px;
font-weight: bold;
text-transform: none;
background-color: #CCCCCC;
background-image: url(../i/d/upcell.gif);
background-repeat: no-repeat;
background-position: top;
}
.textblack {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-color: #000000;
}

.cell_bio {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 110%;
padding-right: 10px;
padding-left: 10px;
vertical-align: top;
background-color: #FFFFFF;
}

Any suggestions of what might have caused this would be greatly apprichaited! And anyone who wishes to comment on my awful coding, feel free , I promise I'm changing my habits, you should have seen my coding before .

Look forward to hearing what anyone has to say.

Jason

I just browsed it in IE6 and it looks fantastic. Good design, but there was no black line.

(I appreciate the descriptive post)

Really, you can't see it? Everyone has been able to it's making this mysterious black line even more confusing!

Cheers about your comment on the design, always a confidence boost!

Thanks for looking for me as well, highly apprichiated!

I also didn't see the infamous black line.

swallow you're not going crazy I can see the black line. I'm not entirely sure what's causing it, but I have a guess. Right below where the line is appearing you have a couple of empty table rows. I think, though I'm far from certain, that IE is giving a border to one of them. I couldn't find any code that would indicate it should though. IE can treat empty elements like table cells or divs differently than Firefox.

You might try just adding a non-breaking space (   ) to the empty table cells. Another alternative might be to remove the two rows and use padding on the cells either above or below to acheive the same spacing between the table cells.

I can`t see the black line ....what is going on with this thing?

Cheers for everyone looking!

I put the problem to my brother who is a coder and he showed me the line of code to take out (which was an empty row) however this completely screwed up the bottom of the page! I think my best bet is going to be to re-do the page! I think this just goes to prove that I need to break away from tables and wonder into the scary world of div tags!

Does anyone else wish that the world only used one browser?

Thanks to everyone for looking I really do apprichiate it! I think I will stay here, I quite like it.

Jase

Jason, don't let those divs scare you. It will take a little time to get used to them, especially if you've been using tables for awhile, but they really aren't any more difficult to understand and I think once you get a good feel for them they offer many more possibilties than tables ever could. They may take a little time to get used to them, but it's worth the effort.

I know what you mean about the different browsers, but it's not all that bad. It can be a little frustrating at times I agree. I try to code using standard compliant code. I use Firefox so using the compliant code I develop till things work well in Firefox and then usually just have to make a few tweaks here and there for IE. It's really not a lot of tweaking though.

IE 5.5 and up actually has pretty good css2 support. Yeah it's missing a few things and it treats the box model differently than inteneded, but once you understand these few things it becomes pretty easy to get things looking good across browsers.

Thanks for the advice vangogh, I'm gonna force myself to work with div tags soon as it seems like eventually everyone will have to learn it. I do try my best to make my site look the same in every browser and I usually get it spot but this one just managed to out do me (theres always one eh?).

I have been reading a book many of you might of read called 'Designing with standards' by jeffrey zeldman who is the guy from Happy Cog. So that would explain my need for wanting to cover every browser and progress to div tags. By the way I would suggest to anyone who takes web design seriously to pick up this book! Highly recomended on my part!

Once again thanks for all the replys!

I learned a lot from Eric Meyer at http://www.meyerweb.com. He's wriiten a few good books that worked for me. I haven't read the Zeldman book, but I hear it's good.

The best way to learn to use css positioning is to code a few sites and learn from your mistakes. It can be frustrating at first, though you'll gain something from each site.

It may not be the same for everyone, but I found it easiest to start with absolute positioning and then move on to floats and relative positioning. That may have just been me though.

Here's a couple of sites that have code for basic css layouts:

http://www.bluerobot.com/web/layouts/
http://www.glish.com/css/

Cool I will check out those books, if it has managed to help at least one person then I'm in with a chance!!!

I mostly want to learn to use div tags so I can create overlay methods just giving me more freedom with how I would like the site to look! (P.S. If anyone looks on the Brit Awards website they have a funky menu overlay on there!)