Problems with CSS positioning

neilorourke · Feb 4, 2007

Hi all

I'm quite new to the principle of using CSS rather than tables for page layout so I'm probably missing something obvious here.

In both IE and firefox all the elements on http://www.teachban-artgallery.com/ are visable when the browser window is maximised. If the user reduces the size of the window they are unable to scroll to the top of the page as the header is truncated.

Please could someone advise me on as a way around this.

Thanks

monty · Feb 5, 2007

Just looked at it and even with the maximum screen size the header is truncated in Safari, FF and Opera.

I looked at your source code and noticed you are using frames... Any particular reason for this? If not, drop the frame and place your page in a div container with absolute positioning and place all page elements inside this container using relative positioning. That should work.

best of luck

neilorourke · Feb 5, 2007

I haven't used frames on this website. I changed the DIV elements within the page DIV container to relative positioning but this did not have any impact on the original issue.

Is there anything else which could be causing this?

Thanks for your time

Neil

groundctrl · Feb 5, 2007

show me the CSS for the #logo div.

Don · Feb 6, 2007

/* centre all elements*/
#centering-div {
position: absolute;
width: 770px;
height: 870px;
left: 50%;
top: 45%;
margin-left: -385px;
margin-top: -435px;
}

<body>
<div id="centering-div">

That is your problem.

You have a top margin of negative 435.

groundctrl · Feb 6, 2007

yeah, using negative margins is a hack.

neilorourke · Feb 6, 2007

Thanks for looking into this. I suspected this may be related to the negetive top margin.

This was recommended as a way of centering all content in the page. Do you know of any way of centering content without this problem occuring?

Cheers

Albino · Feb 6, 2007

centreing content is easy:

body{
text-align:center;
}

then in your #contatiner (or equivalent):

#container{
margin:0px auto;
}

works a treat!

Don · Feb 6, 2007

I'm with albino 100%...

#centering-div {
position: absolute;
width: 770px;
margin: 25px auto 0;
}

Because your content isn't a fixed height, I'd drop the vertical centering attempt altogether and simply set my left and right margins to auto, and the top margin to give the header a little space.

A breakdown of the margin:
-- 25px - From the top - to give the header a little breathing room, adjust it however you'd like.
-- Auto (left and right) - Is telling it to set the left and right margins equally, which will center it horizontally.
-- 0 - Just an unset bottom margin.

The only way, I believe, to use the previous hack and not run into problems with things disappearing - would be to set a minimum height/width, but I'm pretty sure IE ignores them, so the majority of your visitors will run into problems regardless.

G'luck.

Albino · Feb 6, 2007

there is a hack for ie min height, just put

_height:min height here;

weird, but it works.

neilorourke · Feb 6, 2007

Hi

I tried this but this threw the content over to the left. I have set a test page and css file so you can see what happens. This can be found at http://www.galleries-online.co.uk/teacban/indextest.cfm http://www.galleries-online.co.uk/teacban/indextest.cfm.

I remember trying these latest suggestions before but they did not work which led me to trying the negative values.

Please note if you do have a look at the above URL please use IE as I have not made any changes to the mozilla version of the css

Don · Feb 6, 2007

My bad, overlooked position, try...

#centering-div {
position: relative;
width: 770px;
margin: 25px auto 0;
}

neilorourke · Feb 8, 2007

Thanks, that's done most of trick although the footer now dissappears from the bottom! Not a big problem, I have other issues but will post them an other time to give you guys a break!

I've switched the changes over to the live version at http://www.galleries-online.co.uk/teacban/index.cfm

cheers

Neil

Problems with CSS positioning

Established Member

Established Member

Established Member

Established Member

VIP Member

Established Member

Established Member

Munky DesignsEstablished Member

VIP Member

Munky DesignsEstablished Member

Established Member

VIP Member

Established Member

Similar threads

We're social

DistinctiveDecking.com

HomEquity.org

BrandPolicy.com

digitalforce.io

casavas.com

Compromise.co

internationalVertiport.com

FluZap.com

Income.To

SpaceNuke.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling