Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

WHat is the reason for the thin white stripe?

Posted on 2004-11-17
24
Medium Priority
?
416 Views
Last Modified: 2012-06-27
Above the home | contact the background has a one pixel white stripe when the font size is medium and in firefox.

Please advice

<base href="http://ep.espacenet.com/"><!-- ep -->

<LINK REL="stylesheet" HREF="http://ep.espacenet.com/scriptsV3/css_ie.css" TYPE="text/css">
<table class="noPrint" width="905" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td width="183" valign="top" background="/images/logo_top.gif"><a href=".."><img alt="" src="http://ep.espacenet.com/images/logo_ep.gif" width="183" height="48" border="0"></a></td>
  <td width="17" bgColor="#65679E" background="/images/banner_middle.gif"><img alt="" src="/images/point.gif" width="17" height="1"></td>
  <td width="100%" background="/images/banner_right.gif" valign="top"><img alt="" src="/images/point.gif" width="1" height="3"><br><b class=logo>European<br/>Patent Office</b></td>
  <td rowspan="2" background="/images/banner_right_r.gif" valign="top"><a href="..."><img src="/images/logo_espace.gif" width="180" height="64" border="0" ALT="Logo"></a></td>
</tr>
<tr>
  <td background="/images/logo_bottom.gif" class="navsmall"><img alt="" src="/images/point.gif" width="13" height="5"><a href="..." class="blue">Home</a>  <span class="blue">|</span> <a href="..." class="blue">Contact</a></td>
  <td bgColor="#65679E"  background="/images/banner_middle_bl.gif"><img alt="" src="/images/point.gif" width="17" height="15"></td>
  <td width="100%" background="/images/banner_right_bl.gif" class="navsmall" style="background-repeat: repeat-y">
<a href="..." class="wit">English</a>
<img alt="" src="/images/point.gif" width="20" height="1"><a href="..." class="wit">Deutsch</a>
<img alt="" src="/images/point.gif" width="20" height="1"><a href="..." class="wit">Français</a>
<img alt="" src="/images/point.gif" width="20" height="1"><a href="..." class="wit"></a>
  </td>
</tr>
</table>
0
Comment
Question by:Michel Plungjan
  • 10
  • 7
  • 6
  • +1
24 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12602959
Michel, all I can see is the light blue line repeating itself twice, is that what you're referring to?

Sean
0
 
LVL 3

Assisted Solution

by:andYetAnotherLoginName
andYetAnotherLoginName earned 450 total points
ID: 12603304
change
  <td width="183" valign="top" background="/images/logo_top.gif"><a href=".."><img alt="" src="http://ep.espacenet.com/images/logo_ep.gif" width="183" height="48" border="0"></a></td>

to
  <td width="183" valign="top" height=49 background="/images/logo_top.gif"><a href=".."><img alt="" src="http://ep.espacenet.com/images/logo_ep.gif" width="183" height="48" border="0"></a></td>

0
 
LVL 3

Expert Comment

by:andYetAnotherLoginName
ID: 12603313
and you have same problem below "Home | contact", too.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 31

Expert Comment

by:seanpowell
ID: 12603317
That's all the table cells and spacer gif's. 90's style page coding will bite you every time :-)
0
 
LVL 3

Expert Comment

by:andYetAnotherLoginName
ID: 12603367
Actually the problem is with a background image. It just wasn't made to tile well )
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12603424
However the page is the same in both IE and Firefox
Why is there a thing UNDER the links in Netscape 4.8? is that what you mean by "and you have same problem below "Home | contact", too."

I do not see that in IE or firrefox.

Sean: This page has been designed for as many browsers as possible.

When we tried using absolutely positioned DIVS the result looked like CRAP in other browsers.

The problems they introduce are much bigger than a few spacer gifs, I just could not see where the dumb line came from, still cannot. The 49 thingy helped but did not explain

Michel
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12603429
andYetAnotherLoginName : Really?

So if I remoev or add a pixel to it it shold be better?

Michel
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12603439
How can http://ep.espacenet.com/images/banner_right_bl.gif
be made to tile better?
0
 
LVL 3

Expert Comment

by:andYetAnotherLoginName
ID: 12603456
but logo_bottom.gif can - you see, top scan line and bottom scan line are same color. they should be different in order to tile seamlessly.
0
 
LVL 3

Expert Comment

by:andYetAnotherLoginName
ID: 12603487
just try my patch above and see that it works and why.

>> is that what you mean by "and you have same problem below "Home | contact", too."

just print-screen your page in Firefox, open in mspaint, and zoom x8.
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12603652
Helped when I flipped the double ones and removed the top row in the wider one
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 750 total points
ID: 12607795
Michel,
It's just the mass of code required when the pages are laid out like that. It's like ecology: reduce, reuse and recycle.

All you need is this:

<div id="header" class="noprint">
      <div class="header-l">
            <a href="#"><img alt="" src="/images/logo_ep.gif" width="183" height="48"></a>
            <span class="toplinks"><a href="#">Home</a> | <a href="...">Contact</a></span>
      </div>
      <div class="header-r">
            <div class="mainlogo">
                  <a href="#"><img src="/images/logo_espace.gif" width="180" height="64" ALT="Logo" border="0"></a>
            </div>
            <div class="logo">European<br/>Patent Office</div>
            <span class="navsmall"><a href="#">English</a> <a href="#">Deutsch</a> <a href="#">Français</a></span>
      </div>
</div>

http://www.pdgmedia.com/ee/michel.html

Sean

0
 
LVL 1

Assisted Solution

by:rockstar_dub
rockstar_dub earned 300 total points
ID: 12609408
Try this

<base href="http://ep.espacenet.com/"><!-- ep -->

<LINK REL="stylesheet" HREF="http://ep.espacenet.com/scriptsV3/css_ie.css" TYPE="text/css">
<style type="text/css">
  a.wit,a.wit:visited,a.wit:active{color:#FFFFFF;text-decoration:none;}
  a.wit:hover{color:#FFFFFF;text-decoration:underline}
  body {margin:0}
</style>
<table class="noPrint" width="905" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="183" valign="top" background="/images/logo_top.gif"><a href=".."><img alt="" src="http://ep.espacenet.com/images/logo_ep.gif" width="183" height="48" border="0"></a></td>
<td width="17" bgColor="#65679E" background="/images/banner_middle.gif"><img alt="" src="/images/point.gif" width="17" height="1"></td>
<td width="100%" background="/images/banner_right.gif" valign="top"><img alt="" src="/images/point.gif" width="1" height="3"><br><b class=logo>European<br/>Patent Office</b></td>
<td rowspan="2" background="/images/banner_right_r.gif" valign="top"><a href="..."><img src="/images/logo_espace.gif" width="180" height="64" border="0" ALT="Logo"></a></td>
</tr>
<tr>
<td background="/images/logo_bottom.gif" class="navsmall"><img alt="" src="/images/point.gif" width="13" height="5"><a href="..." class="blue">Home</a> | <a href="..." class="blue">Contact</a></td>
<td bgColor="#65679E"  background="/images/banner_middle_bl.gif"><img alt="" src="/images/point.gif" width="17" height="15"></td>
<td width="100%" background="/images/banner_right_bl.gif" class="navsmall" style="background-repeat: repeat-y">
<a href="..." class="wit">English</a>
<img alt="" src="/images/point.gif" width="20" height="1"><a href="..." class="wit">Deutsch</a>
<img alt="" src="/images/point.gif" width="20" height="1"><a href="..." class="wit">Français</a>
</td>
</tr>
</table>
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12617975
Try it in mozilla :|
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12619001
Works pefectly in Mozilla - what are you referring to?

Sean
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12620867
Thin line in my mozilla
0
 
LVL 3

Expert Comment

by:andYetAnotherLoginName
ID: 12622497
m-plung-jan, correct me if I am wrong, but you have said that you have fixed the problem. so, it is the time to select most helpfull answers ;)
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12622661
I would like to fix the problem using html and not by messing with images

And it is M. Plungjan :)

Michel
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12624205
Michel,
You viewed this page, and still saw a thin line?

http://www.pdgmedia.com/ee/michel.html

Sean
0
 
LVL 3

Expert Comment

by:andYetAnotherLoginName
ID: 12624225
>> I would like to fix the problem using html and not by messing with images

didn't I gave you HTML?
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12624455
Sean: what of the css did you create and what did you copy. I would prefer not to mess with the css

AYALN: Complete?

Roc: light stripe in firefox
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12624498
Sean: Have a look at yours in Netscape 4 just to see what it looks like, then try a pda with the novarra browser. Then you will see why I prefer tables
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12624661
>>Have a look at yours in Netscape 4.
No thanks, I don't code for N4.

>>then try a pda
You didn't say anything about pda support until now.

The reason you prefer tables is that the page is deisgned for them, so you have no choice. CSS is about rethinking layout, not replacing <td> with <div>

Sean
0
 
LVL 75

Author Comment

by:Michel Plungjan
ID: 12625614
"Sean: This page has been designed for as many browsers as possible.
When we tried using absolutely positioned DIVS the result looked like CRAP in other browsers."

And that is the crux.

I just want to get rid of the lighter stripe using html in tables, e.g. fix the table I have

Your solution is great if I ignore older browsers. I can tell you the audience are quick to complain when something breaks in Mozilla Linux or safari on osx

Michel
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question