help required - css

MNuTz · 7 Aug 2007 at 16:02

Hi all, my bro-in-law has just created a new site for himself and he is having trouble.

http://www.urbanebula.co.uk/dpgames/dpg.htm

It works fine in opera/IE but not in Firefox. As you can see the links div is stopping after the last picture and its then bringing the footer up underneath it.

Im just starting out learning CSS and my HTML skills are rather rusty too.

I was thinking about min-height but he wants the link to expand with the main div.box.

Any suggestions?

Boov · 7 Aug 2007 at 16:10

Code:

div.footer {clear:both}

that should sort your little footer problem.

are you saying you want the div.links and div.box to both be the same height? based on the content within the div.box?

if so, there is no direct css way of doing this, youd think height:100% might work, but it doesnt. Youd have to use something called "faux columns", its a technique using a cleverly created repeating background image that gives the impression that the div.links is longer than it is.

have a read of this

MNuTz · 7 Aug 2007 at 16:11

thanks mate, ill pass that on to him

{clear:both} does put the footer at the bottom however the link div then spreads across the whole page

furnace · 7 Aug 2007 at 16:32

A bit of restructuring, I think.

Code:

--- IN THE HTML DOCUMENT ---

<div id="header">
    This is the sites header.
</div>
<div id="mainContainer">
    <div id="links">
         Here are your links.
    </div>
    <div id="main">
         This is the main content<br><br><br>It doesn't work with less than ~3 lines.
    </div>
    <div id="clearCols">&nbsp;</div>
</div>
<div id="footer">
    This is the sites footer.
</div>


--- IN THE CSS DOCUMENT ---

#header {
    height: 100px;
    width: 750px;
    border: 4px solid #FF9933;
    background-color: #996600;
    margin: 0px auto;
    padding: 0px;
}
#mainContainer {
    border-left: 4px solid #FF9933;
    border-right: 4px solid #FF9933;
    border-bottom: 4px solid #FF9933;
    background-color: #996600;
    width: 750px;
    margin: 0px auto;
    padding: 0px;
}
#mainContainer #links {
    width: 110px;
    margin: 0px;
    padding: 5px;
    float: left;
}
#mainContainer #main {
    padding: 0px;
    margin: 0px 0px 0px 120px;
    border-left: 4px solid #FF9933;
}
#mainContainer #clearCols {
    margin: 0px 0px 0px 120px;
    border-left: 4px solid #FF9933;
	clear: both;
	line-height: 1px;
}
#footer {
    width: 750px;
    margin: 0px auto;
}

min-height is unsupported

you have to work around it

Tripnologist · 7 Aug 2007 at 17:08

furnace said:
A bit of restructuring, I think.
min-height is unsupported you have to work around it

min-height is doable with a star html hack for IE.

Code:

#divname { 
min-height: 200px;
height: auto;
}

* html #divname {
height: 200px;
}

furnace · 7 Aug 2007 at 17:17

Pffft, dirty hacks...

Just kidding, I'll note that down..!

I've never needed to use min-height before, but I'm sure knowing that hack will come in handy when I do :cool:

I think you should avoid any hacks if you can though, and try to get it working without them by doing things a different way

Some hacks can fluff things up in other browsers but 'normal' CSS is less likely to. Still though, if a hack's the only option, they're fine!

Boov · 7 Aug 2007 at 17:31

I think you should avoid any hacks

ditto, id soon rather make a slight compromise, or tackle something a different way than use a hack.

I have never even found the need to use a hack, so i dunno, either i'm not being adventurous enough with my styling and layout, or i'm just a css genius :cool:

Eriedor · 7 Aug 2007 at 22:46

Btw the page is in quirks mode, add the strict document type definition to the top of the page.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

furnace · 9 Aug 2007 at 14:47

How's it going dude? Looks like the site has half died..? :confused:

Tripnologist · 9 Aug 2007 at 15:04

furnace said:
Pffft, dirty hacks...
Just kidding, I'll note that down..!
I've never needed to use min-height before, but I'm sure knowing that hack will come in handy when I do
I think you should avoid any hacks if you can though, and try to get it working without them by doing things a different way Some hacks can fluff things up in other browsers but 'normal' CSS is less likely to. Still though, if a hack's the only option, they're fine!

I try to avoid them when possible as well but sometimes you just can't.

I have to use min-height every now and again as our main designer is a print designer first, web second so he tends to forget that some things which work great on paper, are considerably harder to make work properly on the web.

The only hack I couldn't live without is the one that gets rid of the double margin bug when margin or padding is applied on the same side as float direction.