14 replies [Last post]
Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

***page removed***

In FF there is a white line (about 2 pixels) appearing below the menu and the main text. In IE there is a huge white line appearing above the menu and the text is indented too far.

I can't see what would be causing this. Anyone?

Anonymous
Anonymous's picture
Guru

Re: Unwanted spacing

Mile wrote:
In FF there is a white line (about 2 pixels) appearing below the menu and the main text.
I can't see what would be causing this. Anyone?

html>body #clearmenu{ /* non IE browsers */
	height: 3px;
}

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Thanks, that removes the line in FF. It does, however, now appear that the blue strip of the menu no longer goes completely along. I guess this is because the white box with the text has now moved up to the same level as the menu,

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Re: Unwanted spacing

I've managed to fix everything but there's still a huge gap between the title and the menu that I can't fix.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unwanted spacing

To find out where white space comes from, assign contrasting background colours to all of the possible elements. The colour that shows up is your number one candidate for the space.

In this case, I'd simplify your mark up and CSS first. Its overcomplicated for what its trying to do. e.g. in the menu, there is no reason for the "headerlinks" class, none that can't be accomplished better by descendant selectors and giving the "#csstopmenu a" display: block. Also, you don't need the inline style elements or the class on the li elements in the menu.

You have a :hover on a non link element. Thats a problem for IE. Put the background change on the links - if its display:block, it'll work just fine. Also there is no need to duplicate styles on the :hover, only put those styles that will change.

There is no <h7>. HTML has 6 levels of headers <h1> - <h6>.

Back to the IE problems:
- left margin/spacing, I don't know. I dropped your html and CSS into a xhtml strict framework and the margin never appeared.

- spacing under the image/above the menu. background colours will show the culprit as being the lefttitle and righttitle divs. Images are inline elements. Make them display:block, which is what you want in this case and "most" of the space will go away. The images probably shouldn't be foreground images anyway. Make your banner something like

<div id="banner">
<h1>Scotband: Scottish Music News</h1>
</div>

Put one part of the banner image as a background on #banner and the other part on #banner h1. Use background position to get them into their correct spots. Use one of the text hiding techniques to hide the h1 text (e.g. offleft).

Continue with the background colour technique to find and kill any other whitespace

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Excellent information...but

I've taken your suggestion on to tidy up the css around the menu and to put in a block. Unfortunately, I've now got a tower.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unwanted spacing

Mostly not tidy the CSS. Tidy the html. The same styles (most likely) need to be present, but no longer on classes, on descendant selectors.

The classes that were on the div if still relevant get moved onto the link element styles.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Well, I've got so far. I've got half the header working but can't get the second half (attached to the h1 tag) to show. Thanks for that and especially the off-left technique; wasn't aware of this.

And, regarding the menu, I just do not know what you are suggesting regarding this. I've followed your instructions as far as I can understand.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unwanted spacing

Its

#banner h1 { ... } not #banner1 h1 { ... }

The h1 will need the height (height isn't necessary for #banner, as a container of inflow elements it will expand to surround them.

You have removed all the list markup from the links.

<div id="main">
  <ul id="csstopmenu">
    <li><a href="#">link</a><li>
    <li><a href="#">link</a><li>
    <li><a href="#">link</a><li>
  </ul>
</div>

In your previous styles it was the <li> element which was floating and so ensured the list was horizontal. By changing to a series of links you are no longer accessing the styles you were using before, those styles were fine they were just spread over too many classes and elements.

For a horizontal menu like yours, its often considered a unordered list of links with styles along the following lines.

ul - overflow:hidden or clear to ensure will surround floated items
ul - background for bits of list outside link items, normally the bit beyond the last link to right hand edge
ul - border-left for first element in list
ul - no padding, can use margins

li - float:left, no margins or padding
li - width, or leave at auto for shrink to fit (can be a problem in some browsers)

a - display block, so all area within borders is clickable
a - border-right, border-bottom & border-top as required
a - background and :hover background
a - padding to space links away from borders

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Thanks for your help Chris.

I couldn't get the header thing with the banner to work so I just combined the two images into one graphic and set it as the background for the banner.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unwanted spacing

Take a look here -- this isn't meant to be a solution by any means, I copied your original page into an XHTML strict framework to check out the original margins and spacing. I have since modified it for the banner, but the menu is messed up due to changes you made to your original styles and then I changes I made to those changes....but it does do the banner correctly and has fixed the white space in IE (but not FF Smile)

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Sorry, I realised I never updated the link as I have moved to [url=***]here[/url]. And I've sorted all the spacing issues.

I've looked at your header and, when I've turned to mine, the left side does not appear. I'll keep looking into it and trying to spot other differences.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Nope. I just can't see why you would be having a success with the banner but I, with identical CSS for those areas, can't get it to appear.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Unwanted spacing

you have

.offleft {
	position: absolute;
	left: -999px;
	width: 990px;
}

I have

.offleft {
  text-indent: -2000px;
}

I am shifting the start of the first line of text. You are shifting the whole element - which means its background as well.

Mile
Mile's picture
Offline
Enthusiast
Glasgow, UK
Last seen: 13 years 25 weeks ago
Glasgow, UK
Joined: 2005-01-22
Posts: 81
Points: 0

Unwanted spacing

Superb!

Thanks for all your help Chris. I really appreciate it.