?
Solved

Trim White space

Posted on 2013-11-20
13
Medium Priority
?
346 Views
Last Modified: 2013-11-21
Hi to all experts,

I'm willing to trim white space in my navigation menu that is here:

https://www.joe-cool.co.uk/EN/home/home.cfm

In between the 2 horizontal lines, I managed the reduce the rolover height to what I wanted, but I got 2 white spaces between the 2 lines.

How can I get rid of it ?

Many thanks for your help !

Adam
0
Comment
Question by:adam1h
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39663099
in style.css you have :

ul#css3menu a{
      display:block;
      height: 15px;
      vertical-align:middle;
      text-align:left;
      text-decoration:none;
      font:bold 12px Helvetica Neue, Helvetica Neue, Helvetica, sans-serif;
      color:#4646463;
      cursor:default;
      padding:10px;
      /*Below, background color for the background of the menu bar*/
      background-color:FFFFFF;
      /*background-image:url("data:image/png;base64,");*/
      background-position:0 50%;
      border-width:0px;
      border-style:none;
      border-color:#333333;
      }

try this for example :
padding : 10px 2px;
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39663193
If you mean the horizontal lines above the navigation, then you could start be removing the margin from the HRs you use as the top and bottom lines.

hr { margin: 0px; }

If you need the space removing all together, you should also collapse the cellpadding and cellspacing on the table (padding and border-spacing in CSS)
0
 

Author Comment

by:adam1h
ID: 39663203
Hi eakim971

Thanks for you reply.

Tried it, but the words neckalce bracelet etc got closer to each other, this is not what I'd like to achieve.

What I'd like to achieve is trim white space on top and on bottom of the words 'neckalce bracelet etc'

I hope this makes sense, I find it hard to explain

Thanks !
Adam
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39663215
I've just given you the answer - read my post above
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39663255
Just as a heads up - you may want to sort your pages out.

You are using Tables for design which was a technique popular a decade or more ago - it no longer is. You will struggle to make your site look and feel the way you want it to.

Also consider running your pages through the W3C validator - 1064 errors and 416 warning! Not a good advert for your business - particularly an e-commerce one!!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39663563
I think you need to pay attention to what Chris is advising.  You are focusing on a minor presentation bit that you don't like and you have a site that does not get a lot of traffic and only has a pr of 2 because of code quality.  

We are not trying to offend you, but the code looks like it is the code originally written when the site was registered in 1999.  It should have a page rank of 4 or even 5 and substantially more traffic, but the spiders are probably not doing a very good job of indexing because they get lost among all the errors.

Cd&
0
 

Author Comment

by:adam1h
ID: 39665205
Chris, Cobol dinosaur.

I don't find offending when you tell me my website is old fashioned. It is indeed.

We are working on a new one that is all made of DIV and CSS. No more tales. I agree with what you both said, it is old and not very good anymore...

But still online, so it needs to be worked on while the new one is beeing done.

MANY THANKS !
Adam.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39665282
@adam1h.

From the EE Guidelines on Grading Answers - http://support.experts-exchange.com/customer/portal/articles/481419

B is the grade given for acceptable solutions, or a link to an acceptable solution. A B grade means the solution given lacked some information or required you to do a good amount of extra work to resolve the problem. When closing the question, the asker should explain why a B grade was awarded.

Considering I told you precisely what was causing your space, can you please explain the B Grade.

And the code I posted was CSS - it was not meant to be dropped straight into your HTML. It was meant for your CSS file!!
0
 

Author Comment

by:adam1h
ID: 39665304
Chris,

Sorry got it wrong with B...I'm really sorry.

Ok will add to CSS instead.  Please accept my apologizes for 'B' I didn't think this would be a lack of information.

Adam
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39665357
OK. No worries
0
 

Author Comment

by:adam1h
ID: 39666682
Please do so Cobol dinosaur (What a great nickname ahahaaha)

A is good. Again, sorry for that guys.

Adam
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

752 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