Thu, 2005-11-03 22:47
thanks to everyone that has helped me out so far, i am pretty close to sorting this but there are a couple of problems...
if you check out:
http://www.student.livjm.ac.uk/engjbarn/
you can see the new elements i have added, namely the column on the left, the main content/cell area and the footer. if you look at the site in IE why are the new elements separated so far down from the logo and the menu? Even in FF the distance between the two is too much.
and for IE why is the footer so far over to the right when it is fine in FF?
Secondly is it possible to put all of the content into a 'container' cell to center it on the page and make it have a different background colour to the actual web page? for example the background would be light grey with a white box (the 'container' cell) in the middle containing all of the content.
And lastly will the maincell change its height depending on what its contents are, for example can i make sure the height is always at least the same as the image on the left hand side while also having the ability to 'grow' down the page if the content needs it to?
phew...these are the last little bits of help i need with this (i hope) so if i havnt tried everyone's patience enough already can you give me any pointers for these problems?
thanks a lot
mm
Fri, 2005-11-04 00:31
#1
Re: another layout problem with IE
mashman wrote:
if you look at the site in IE why are the new elements separated so far down from the logo and the menu?
It's something in #btnList cos if you put a border around it, you'll see it butts up against where the rest of your content starts. Have a look at the heights, padding or margins of the elements contained with #btnList.
mashman wrote:
and for IE why is the footer so far over to the right when it is fine in FF?
You don't need float: left on #maincell and #footer. Just give them both the same margin-left.
mashman wrote:
Secondly is it possible to put all of the content into a 'container' cell to center it on the page and make it have a different background colour to the actual web page?
Yes, create your container and give it margin: 0 auto to centre it. And yes, it can have a different background colour from your body.
mashman wrote:
And lastly will the maincell change its height depending on what its contents are, for example can i make sure the height is always at least the same as the image on the left hand side while also having the ability to 'grow' down the page if the content needs it to?
If you give #lcol and #maincell a fixed height, they won't 'grow' in FF. You have to use min-height instead (although conversely, you do use height for IE, but would need to use a hack or a IE conditional comment to feed height to IE & min-height to FF).
However, I don't know how you'd go about making the left column's bottom angle always meet up with the bottom of your main cell because the amount of content is going to vary. If you wanted the proportions to remain exactly as they are now, you might have to use overflow:auto and have internal scrollbars on those divs which probably wouldn't look good.
Mon, 2005-11-07 19:10
#2
[SOLVED]another layout problem with IE
cheers thats sorted out all of the layout issues mentioned above and i am really close to finishing, but...
do you remember this..
#btnlist a {
padding: 35px 0px 0px 0px;
background-repeat: no-repeat;
background-position: 0% 0%;
text-decoration: none;
display:block;
width:100px;
height:141px;
background-image: url(btn.gif);
}
this is the code i used to sort out the problem with the positioning of the text on the menu buttons - thanks again for that Tyssen. While this has done the trick there is an unexpected side effect - if you go to:
(ive outlined each element for clarification purposes)
http://www.student.livjm.ac.uk/engjbarn/
and view the page in FF you will see that the button rollovers are triggered when the cursor is below the actual button itself.
Now if you view the page in IE you will see why, the padding used in the code above has pushed the bottom of the link down way past the edge of the graphic, im not sure why but this is shown in IE but not in FF.
Obviously this is not ideal, so is there a way to get rid of this and leave the text unaffected?
I have tried applying a span to the text between the <a> </a> tags as in:
http://wellstyled.com/files/css-nopreload-rollovers/example2.html
but this did not work, the padding of the span would work in every direction except up - the span would simply extend up over the edges of all the containing cells and not actually 'move' the text.
thanks in advance for your help
mm
Wed, 2005-11-09 14:24
#3
[SOLVED]another layout problem with IE
do you think it will just be easier for me to re-do the button graphics with the button text incorporated into the graphic?
i know this wouldn't be ideal but im not sure if it is possible to have the button text where it is without the padding on the bottom of the button.
mm