[xxvatarxx]

Really annoying problem, in IE, and only in IE on certain pages the sidenav appears at the bottom of the page.

This is abviously something to do with the php scripts (well the outputted html )

It happens here:

http://www.crossgeneration.co.uk/gallery

http://www.crossgeneration.co.uk/games

But i don't know whats causing it
If i could work out what was causing it then perhaps i could fix it
Anyone got any ideas, 'cus i sure as hell can't figure it out.

On the games script it did it in both IE and FF but i fixed it for FF.

[Nico]

Seems more like an CSS problem. Try adding this to the #sidebar style:

Code:

vertical-align: top;

[Sheepymot]

Wouldn't it make more sense to make it into a table with two columns and include the Navigation bar on the right one?

[xxvatarxx]

the vertical align didn't work (assuming i put it in the right place )

just to check where would you put it in here

PHP Code:

/* Layout elements */



/* Fundamentals */



html {

    background: #222 url(../images/whitebg.gif) repeat-x scroll;

    font: 0.75em/1.3 Verdana, Helvetica, Arial, Sans-serif;

    text-align: center;

}



/* Body container */



body {

    margin: 0 auto;

    padding: 0;

    text-align: left;

    width: 700px;

    background: #fff url(../images/whitemainbg.gif) repeat-y;

    border-left: 1px solid #000;

    border-right: 1px solid #000;

}



/* Links */



a:link, a:visited {

    color: #585858;

    text-decoration: underline;

}



a:hover, a:active {

    color: #000000;

    text-decoration: underline;

}



/* Headings */



h2 {

    font: normal 1.9em "Century Gothic", Geneva, Helvetica, Arial, Sans-serif;

}



h3 {

    font: normal 1.6em "Century Gothic", Geneva, Helvetica, Arial, Sans-serif;

}



/* Lists */



ul {

    margin-left: 25px;

    padding: 0;

}



li {

    list-style-type: square;

}



/* Layout IDs */



/* Header */



#head {

    width: 700px;

    height: 150px;

}



#head h1 {

    margin: 0;

    padding: 0;

    display: block;

    width: 700px;

    height: 150px;

    background-image: url(../images/whitehead.jpg);

    text-indent: -10000px;

}



/* Navigation */



#nav {

    margin: 0;

    padding: 0;

    width: 700px;

    height: 20px;

}



/* Navigation list */



#nav ul {

    margin: 0 0 0 13px;

    padding: 0;

}



#nav li {

    float: left;

    list-style: none none;

    font-size: 1.1em;

    margin: 0 0 0 2px;

    padding: 3px 0;

    text-transform: uppercase;

}



/* Navigation links */



#nav li a:link, #nav li a:visited {

    margin: 0;

    padding: 3px 0;

    display: block;

    width: 110px;

    color: #222;

    background-color: #f3f3f3;

    text-decoration: none;

    text-align: center;

}



#nav li a:hover, #nav li a:active {

    margin: 0;

    padding: 3px 0;

    display: block;

    width: 110px;

    color: #111;

    background-color: #f3f3f3;

    text-decoration: underline overline;

}



/* Span to change colour */



#nav li a:link span, #nav li a:visited span {

    margin: 0;

    padding: 0;

    color: #5588b5;

    text-decoration: none;

}



#nav li a:hover span, #nav li a:active span {

    margin: 0;

    padding: 0;

    color: #5588b5;

    text-decoration: none;

}



/* Main content */



#main {

    width: 450px;

    padding: 15px;

    float: left;

}



/* Sidebar */



#sidebar {

    width: 190px;

    padding: 15px;

    float: right;

}



/* Sidebar list links */



#sidebar ul {

    margin: 0;

    padding: 0;

}



#sidebar li {

    margin: 3px 0 0 0;

    padding: 0;

    list-style-type: none;

}



#sidebar li a:link, #sidebar li a:visited {

    display: block;

    width: 180px;

    padding: 2px 0 2px 5px;

    background-color: #f1f1f1;

    color: #333;

    text-decoration: none;

}



#sidebar li a:hover, #sidebar li a:active {

    display: block;

    width: 180px;

    padding: 2px 0 2px 5px;

    background-color: #fcfcfc;

    color: #222;

    text-decoration: none;

}



/* Footer */



#foot {

    margin: 0;

    padding: 0;

    text-align: center;

    clear: both;

}



#foot p {

    margin: 0;

    padding: 20px 0;

    font-weight: bold;

} 

And i'd prefer not to use tables

[Sheepymot]

If you did on the off chance decide to use tables:

Code:

<table cellpadding="5" border="0" width="100%">
<tr>
<td>Blah blah blah</td>
<td>

<table cellpadding="5" border="0" width="100%">
<tr>
<td>my navbar</td>
</tr>
</table>

</td>
</tr>
</table>

I'm sure it'd be easier to do than mess with div ids

[xxvatarxx]

I guess if all else fails i could use tables but i would prefer not to, just had a quick go with the table and it pretty much fixed IE (background was out of line) but i can fix that easy probs.

But in ff it was way screwed up, but i think i know why that was too

Will experiment more tomorrow, but in the mean time does anyone know how to do it with the divs

[MadDog]

* Topic moved to the correct forum *

[xxvatarxx]

* Topic moved to the correct forum *

Sorry i thought it was a php problem as the php scripts were causing the issues

[xxvatarxx]

hmm the tables won't work unless u use tables for the whole page and i reallt cba doing that, Sure no one knows whats wrong with the divs? or has any ideas or even any links that could help me with my problem?