CSS Problems...

Yes! Got everything working, apart from in IE6 now, and for the life of me I cannot work out what is wrong :(
 
Well it was going

Header
Left Tool Bar + H1
Main Content
Footer

Now I got it looking almost perfect, the only problem left, is that in IE6, the left nav bar does not go right to the bottom, in every other though it does, help me finish my template please!
 
SiriusB said:
Personally I would just pretend IE doesn't exist :p
I would, but then I wont get faras this site needs to be compatable accross the board
 
Last edited:
SiriusB said:
Try the forums over at www.csscreator.com

Since it is a dedicated CSS community you should get some very helpful replies. My own woes were cured with just one reply. Good eh?
Thanks, have made a post, but not got a reply yet, I did however find that they dont like position: absolute, so I have removed it from my style sheet, however it now looks a total mess, and does not work at all, how on earth do you position things without them?
 
For the grey bit to extend to the bottom, make a background image and repeat it in y, so that it looks like its extending. This is easier than working out the CSS to make it work.

Also you can use margins to position things, and floats.

That grey side bit can be a float:left; and give it a specific width, then put a left margin on the main content box so that it doesnt overlap this side box.
 
SiriusB said:
A great place for layouts is here: http://www.dynamicdrive.com/style/layouts/

They should all work in any browser so just find a layout you like then just tweak it. Most of the layouts I have looked at are easy to follow so it shouldn't take you long to work out how they work etc.
Thanks, got it looking somehwhat better, but still, I cannot make my footer apear after the content, nor can i get the side nav bar to scroll to the bottom of the content... help please :D

http://cpanel.lincoln.ac.uk/dci125/
 
Ok for now I have had to fix the position of my content, meaning that it all fits on screen, however now i can only have a very small amount of content on each page. can someone help me please get it to do the following:

1) Make it so the footer is always at the bottom of content, unless content is less than the window then its at the bottom of the window.

2) Make the side nav bar stretch down to the footer, again growing with content, but being no smaller than the browser window.

I cannot use anything like min-height: as i need it to work in IE and FF! Thanks :)
 
First problem. Using position: absolute removes an element from the document flow i.e. it doesn't affect the positioning of elements around it. So #mainwrap won't expand #wrap down when it fills with content.

Start by changing the div#mainwrap rule to:
Code:
div#mainwrap {
margin-left: 160px;
overflow: auto;
width:85%;
float: left;}
and you should be in a better position to get the footer working.
 
Augmented said:
First problem. Using position: absolute removes an element from the document flow i.e. it doesn't affect the positioning of elements around it. So #mainwrap won't expand #wrap down when it fills with content.

Start by changing the div#mainwrap rule to:
Code:
div#mainwrap {
margin-left: 160px;
overflow: auto;
width:85%;
float: left;}
and you should be in a better position to get the footer working.
Doing that makes no difference in FF, and breaks it totaly in IE6

*EDIT* Ok, got it looking ok in both browsers now, however the footer still does not go to the bottom of my content, and the left nav bar still does not expand with my content :(

And now my content goes off the page causing a scroll bar, and white space in IE6 To fix that i have to remove float: left; and doing so pushes all my text under everything else - The only bit in the right place is <h1> and i can see no reason for this
 
Last edited:
Back
Top Bottom