Crappy Problem...

afmanuk · #1 Nov 22nd, 2007, 18:25

I know this is really basic problem...
But I can't seem to find a solution to it...
I have a gap...
(Can't be bothered to link css right now)
Link

I know it's crap etc etc. It's just a quick favour for a friend

Stuart · #2 Nov 22nd, 2007, 18:27

Where's the gap? It all looks good to me...

afmanuk · #3 Nov 22nd, 2007, 18:29

Untitled9.jpg

I see that gap

Stuart · #4 Nov 22nd, 2007, 18:31

That is caused by the images. See:
header.png
And the other one:
content_top.png
Put them together, and you get a gap...

Blake121 · #5 Nov 22nd, 2007, 23:22

Add "margin-top: -5px;" to your mainContent div style.

e.g.

Code: Select all

#mainContent
{
	width: 586px;
	height: 400px;
	display: block;
	overflow: auto;
        margin-top: -5px;
}

Blake

Stuart · #6 Nov 23rd, 2007, 01:59

That sounds like the best fix. Use margin-top: -3px; though. Otherwise, IE squeezes the image...

afmanuk · #7 Nov 23rd, 2007, 07:10

Haha. Thanks for all your help

I'll probably just use the -5px margin-top for now and change the images when I can be bothered

Stuart · #8 Nov 23rd, 2007, 13:26

OK. Sounds good.

Emzi · #9 Nov 23rd, 2007, 14:07

The site doesn't look good in IE7. The text is below the box it's supposed to sit in.

welshstew · #10 Nov 23rd, 2007, 14:14

You have a similar issue in IE6, it's inside you container but the box is extended. It looks like the the box is sitting under the nav.

Stuart · #11 Nov 23rd, 2007, 14:59

Yeah, I noticed that too. Fortunately, I fixed it. Here is the code:

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rudiguard</title>

<style type="text/css">
body
{
    width: 100%;
    background-color: #c3c3c3;
    padding: 0;
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}

img { padding: 0; margin: 0; }

#wrapper
{
    width: 730px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#contentWrap
{
    background: url(images/content_middle.png) repeat-y;
    padding: 0 22px;
    margin: 0;
    height: 400px;
    display: block;
    margin-top: -3px;
}

#Navigation
{
    float: left;
    width: 100px;
    padding-right: 2px;
    height: 400px;
    text-align: center;
}

#Navigation ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#Navigation a
{
    display: block;
    text-decoration: none;
    color: #ffffff;
    margin-top: 3px;
    padding-top: 3px;
    width: 98px;
    height: 25px;
    background: url(images/nav_button.png) no-repeat left top;
}

#Navigation a:hover
{
    background-position: right top;
}

#mainContent
{
    width: 580px;
    height: 400px;
    display: block;
    overflow: auto;
    float: right;
}
</style>
</head>

<body>
<div id="wrapper">
<img src="http://afmanuk-designs.co.uk/Rudiguard/images/header.png" />
<img src="http://afmanuk-designs.co.uk/Rudiguard/images/content_top.png" />
<div id="contentWrap">
<div id="Navigation">
<b>Navigation</b>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Programs</a></li>
</ul>
</div>
<div id="mainContent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pede. Nulla vehicula. Maecenas justo enim, tempus ac, rutrum eu, sodales ac, lectus. Aliquam at orci eget nisl gravida ullamcorper. Sed tortor. Proin id turpis. Nunc quis augue id turpis placerat faucibus. Donec malesuada, mauris id tempor gravida, mauris risus laoreet justo, eget malesuada lacus dui a orci. Mauris et tortor. Nulla facilisi. Praesent sodales, dui nec luctus placerat, enim justo molestie erat, sed consectetuer est orci non tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer condimentum. Morbi vel odio.

Morbi magna nisi, adipiscing sit amet, condimentum sed, imperdiet dictum, pede. Sed sed lorem. Vivamus pretium tincidunt ipsum. Aenean eget odio. Curabitur augue. Ut dignissim, quam ut aliquet egestas, massa tortor imperdiet augue, eget fringilla velit risus ut nibh. Integer pharetra. Nunc facilisis enim ut risus. Proin tellus. Phasellus vel sem nec magna hendrerit consectetuer.

Quisque eu sem nec quam molestie euismod. Pellentesque vitae nisl ut risus consectetuer rutrum. Aliquam erat volutpat. Aenean sed orci. Morbi lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent eu ipsum eget risus venenatis tempus. Integer ullamcorper nunc. Suspendisse tempor fringilla mauris. Mauris vel massa quis odio euismod consectetuer. Donec volutpat nisi at diam ullamcorper suscipit. Nulla urna neque, accumsan et, sodales vitae, cursus non, augue. Sed blandit enim vel massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut urna sem, vehicula vel, dictum sit amet, porta quis, metus. Mauris massa. In fermentum. Suspendisse tristique tincidunt nulla. Ut a tellus.

Nunc non massa sit amet velit interdum commodo. Integer vel ligula et nibh pulvinar egestas. Nulla urna mauris, semper ut, venenatis sit amet, condimentum sed, nulla. In commodo, lectus sit amet mattis laoreet, erat nisl consectetuer lorem, eget posuere lorem risus non orci. Sed eleifend, purus ac rutrum aliquet, magna dui hendrerit lacus, at venenatis lorem enim vitae nisi. Nunc lacinia ipsum et augue. Ut tincidunt nisl nec turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut semper, ante et laoreet lobortis, magna lectus tristique nisi, ultrices elementum magna enim at metus. Donec nunc tortor, malesuada at, blandit eget, ornare vel, justo. Nullam sapien nulla, cursus at, laoreet quis, accumsan vulputate, urna. Suspendisse potenti. Nullam sodales enim a purus. Vivamus euismod luctus ante. Proin vitae felis.

Fusce dignissim arcu ac pede ornare vulputate. Ut quis urna non enim sodales eleifend. Morbi velit dui, elementum at, dictum vitae, aliquet vitae, elit. Ut viverra mi. Etiam eros. Curabitur a diam. Fusce porta. Maecenas interdum tellus et est commodo blandit. Aliquam euismod ullamcorper justo. Vivamus nunc. Etiam metus. Morbi in massa. Integer aliquet. Aenean a elit. Proin bibendum, dolor dignissim tincidunt accumsan, nisi ligula vehicula nibh, sit amet consectetuer sem lorem et lectus.
</div>
</div>
<img src="http://afmanuk-designs.co.uk/Rudiguard/images/content_bottom.png" />
</div>
</body>
</html>

That should do it... Also, I put the <style> stuff inside the <head> where it is supposed to be. Don't put it in the <body>!
By the way, the margin should be -3px. -5px screws up IE and squeezes the image... Oh, and don't bother changing the images, that won't do it. When I said that, I though you meant the gap between the header and the body, that huge ~100px space. But then, I realized that you meant the small gap at the top of the container. So, again, use the -3px margin, editing the images won't do it.

Cheers

welshstew · #12 Nov 23rd, 2007, 15:06

Quote:

Originally Posted by swagner

Yeah, I noticed that too. Fortunately, I fixed it.

Well done Stuart, if we still had rep i'd give ya some.

Stuart · #13 Nov 23rd, 2007, 15:08

Thanks! But it was no problem, I just love helping people...

Monie · #14 Nov 27th, 2007, 01:05

Quote:

Originally Posted by welshstew

Well done Stuart, if we still had rep i'd give ya some.

I was off this few days! What happen to the rep points?

Stuart · #15 Nov 27th, 2007, 01:39

Quote:

Originally Posted by monie

What happen to the rep points?

I asked the same thing in my thread: "What happened to the rep points?"
It's closed, but Jacob and Rob posted all the answers...

Monie · #16 Nov 27th, 2007, 01:50

I worked so hard to get Rep Points..
So long my rep points..

Stuart · #17 Nov 27th, 2007, 01:51

How do you think Jacob feels? He had seven little green blips!

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Crappy Problem...