Coloured background [fine], line above - not so fine

  • 1
  • Question
  • Updated 9 years ago
  • Answered

Hi - I wanted to copy teh format I saw on teh guardian website in the UK.

the Red line above the grey boxes is a nice layout. I can do the background colour of a box and I seem to be able to do a green line. On my work PC though there is a gap between the background and the line. See my site if you can - Test page.

See what I mean?

At home on my mac its fine - no gap......

What am I doing wrong?


Photo of vasey888


  • 51 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of Emmy


  • 5892 Posts
  • 299 Reply Likes
Hello vasey888,

First, you have a really lovely site! I like the banner images on each page, so pretty! And, the Cape Town area is one of the most beautiful in the whole world I think :)

So, the problem with the green line, I am definitely able to reproduce this, on a Mac in Firefox the green line is flush up to the edge to the background, but in IE in a PC environment I do see the space between the two.

I need to forward this onto one of my colleagues who is not currently online who can look at the HTML and CSS code to see if anything looks amiss, and then will post back here after she has had a chance to take a look.

Thanks for your patience!

Photo of vasey888


  • 51 Posts
  • 0 Reply Likes
Thanks so much ! I look forward to your reply and thanks for the kind comments re the site!
Photo of Kershnee


  • 2087 Posts
  • 152 Reply Likes
Hi Vasey888,

Thank you for your patience while we looked into this. I got assistance from our Interaction Designer here are Yola. He has added an example to your test-zone page that uses CSS borders rather than an <hr> tag to resolve this issue. Please take a look and if you have any questions, please let us know.
Photo of vasey888


  • 51 Posts
  • 0 Reply Likes
You are the best!! Thanks so much - am just learning so pls excuse my random questions. Thanks again - I look forward to trying this out on the site this eve, cheers, Dave
Photo of Ruhan


  • 117 Posts
  • 0 Reply Likes
This looks great! But I still don`t know how you guys did it? Steps please! Sorry if I`m a nuisance!
Photo of Sanja


  • 10698 Posts
  • 495 Reply Likes
Hello Ruhan

The Interaction Designer added an inline top border on the content blocks. Here's the example of the code:

<div style="padding: 0px 20px 20px; background-color: rgb(227, 251, 233);">
<p>Enter some text here</p></div>

<div style="border-top:green solid 2px; padding:5px 20px 20px; background-color:#E3FBE9;"><p>Test Zone with an inline top border style</p>
<p>More text can go here</p>

To learn more about this, please visit this link: CSS Borders