PDA

View Full Version : Please Help!!



chris_bcn
07-01-2005, 09:23 PM
This seems like an odd 'un to me.

In firefox there's a big gap between the header, the content and the footer divs. If you put a border round each div, then the gap goes away. Which would be fine if I wanted a border on it, unfortunately...

If you remove the image in the content div it seems ok in FF.

The site looks how I want it in IE, and I can't for life of me see what teh problems is

So can anyone of you, with way better css skills than I, see what the problem is?

Thanks a million

ttp://www.geocities.com/clbasey/ffodd.html

jscheuer1
07-01-2005, 09:34 PM
A kludge fix would be to add a 1px border that is the color of the background of the page.

chris_bcn
07-01-2005, 09:39 PM
Cheers,

I thought of that, but the background image has a gentle fade, so the colours don't line up right.

I keep staring at the CSS figuring it's something really obvious, but I still can't see it

Twey
07-01-2005, 09:43 PM
Hmm. Have you tried altering the margin?

chris_bcn
07-01-2005, 09:45 PM
yep - every which way but loose!

It's really starting to do my head in

I guess I'll just start from scratch and see if a stupid error crept in somewhere. Never had this problem before

Twey
07-01-2005, 09:52 PM
No, no need for that. Set border-style to "hidden." The difference between hidden and none is that hidden does everything as if the border was there - it just doesn't show the border.

chris_bcn
07-01-2005, 10:06 PM
great idea!

Doesnt work though unfortunately. As soon as the border is hidden the gap reappears.

All very odd - I usually have a problem getting pages to look good in IE rather than this way round!

Twey
07-01-2005, 10:19 PM
Oh...
That is very strange. border-style: hidden should perform just like border-style: solid. Did you set all the other border-related options the same?
If so, that might be a bug.

mwinter
07-01-2005, 10:45 PM
Set border-style to "hidden." The difference between hidden and none is that hidden does everything as if the border was there - it just doesn't show the border.The hidden value is the same as none, except with tables where it has different semantics for border-conflict resolution.

The problem is with margins, but not the ones you're thinking about. The gap between header and content is caused by the margin on the heading element, and the gap between content and footer is caused by the margin on the last paragraph.

The style sheet below fixes this and a few other problems. One thing I would like to draw attention to is the pullquoteRight class. The alterations there allow greater flexibility when used with non-standard font sizes. Compare the behaviour of the two by pressing Ctrl++ (control-plus) in Firefox and you'll see overflow in yours.


body {
background: #ffffff url(ffodd_files/bluefog.gif) repeat;
color: #000000;
font: normal 100%/120% "Trebuchet MS", verdana, arial, sans-serif;
margin: 0;
text-align: center;
}

p {
margin: 0.5em 0;
}

h1 {
background-color: transparent;
color:#666666;
font-size: 130%;
font-weight: normal;
margin-top: 0;
}

#header,
#wrapper,
#footer {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 769px;
}

#header {
background: transparent url(ffodd_files/newmast_copy.gif) no-repeat;
height: 190px;
}

#wrapper {
background: #A88528 url(ffodd_files/newbody2.gif) repeat-y 0% 0%;
padding-bottom: 0.5em;
}

#leftnav {
float: left;
width: 160px;
border: 1px solid red;
}

#content {
margin: 0 50px;
}

.pullquoteRight {
border: 2px #000;
border-style: solid none;
float: right;
margin: 0 0 1ex 1ex;
padding: 0 1ex;
width: 12em;
}

#footer{
clear: both;
background: transparent url(ffodd_files/wornfooter.gif) no-repeat;
height: 69px;
text-align: center;
}Hope that helps,
Mike

chris_bcn
07-07-2005, 06:08 PM
Thanks for that - I'm going to give it a go now

chris_bcn
07-07-2005, 06:14 PM
You Sir, are a genius.

I'm making the transistion from Table to full CSS layouts, and as you can see, not all that sucessfully. This forum is a great place to learn though.

Now I need to site down and analyse your code, so that I understand it

Thanks again!