...

View Full Version : Unexpected CSS positioning



nerk01
11-19-2009, 04:05 PM
My entire layout works fine. Except when I want to click on a link that takes me to an Anchor tag. Then most of my page shifts upwards in relation to my header.

Take a look at www.midwestweb.net
Click on the Company tab. Layout is ok.
Next, click on the About Us item in the Company menu.

I've looked it all over. I've compared browsers and it occurs the same on all. I think I've narrowed it down to a CSS issue, but can't find it.

Maybe you can see what I cannot?

abduraooft
11-19-2009, 04:17 PM
I think the following is the culprit.

#wrapper {/*default.css (line 14)*/
overflow:hidden;
}
If you are using it to clear your floats, you may need to switch into the other ways, see www.positioniseverything.net/easyclearing.html

Excavator
11-19-2009, 04:31 PM
Hello nerk1,
Is your link, About Us, somehow directed at the anchor #About.
On the About page, you have
<div id="outer5">
<div class="content">
<a name="About" />
<h3>About us:</h3>

Your links Mission, Personel, and Careers open up to their respective sections also.


A few more things I notice right off:
Your #header is set to height: 144px;
The .content, inside of #header, is 189px high so your box model (http://www.w3.org/TR/CSS2/box.html)is off.
A good way to find those sort of errors is to apply different background colors to different elements and check that they enclose what you expect them to.
Try removing the height from #header and let it expand to enclose whatever is in it.
Once you fix the box model, overflow:hidden; won't be needed anymore.


For me, the page also jumps to the right. Your index page is not tall enough for my browser to need a vertical scrollbar. When I click on About Us, the content of that page is long enough that the scrollbar appears which makes the page jump over to the left the 15px width of the scroll bar.
The solution to that is to force the scrollbar, even when it's not needed, but adding the line height: 100.1%; to the CSS for your body.

nerk01
11-19-2009, 05:16 PM
You're both right about the overflow.

I've corrected the overflow, but it introduced a new problem.

The three columns below my rotating image now don't stay attached to the footer. I was using this line:

#outer1, #outer2, #outer3 , #outer4, #outer5 {padding-bottom:32767px; margin-bottom:-32767px;}
to accomplish that, but with the overflow on that makes the page really long.

Also I tried to add the height=100.1% to the body, but it didn't work.

Excavator
11-19-2009, 05:29 PM
Oops, sorry.
This works -
html, body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#fff; height: 100.1%;}


see the demo (http://nopeople.com/CSS/vertical_scrollbar/index.html)

nerk01
11-19-2009, 05:34 PM
Oops, sorry.
This works -
html, body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#fff; height: 100.1%;}


see the demo (http://nopeople.com/CSS/vertical_scrollbar/index.html)

I didn't add to the html, now it works, thanks!

Now if only I could fix the columns to always size until they hit the footer.

Excavator
11-19-2009, 05:40 PM
Now if only I could fix the columns to always size until they hit the footer.

On your index page, does this work for you?
#outer1, #outer2, #outer4 {
height: 250px;
}


If not, you will need to look into faux columns. (http://nopeople.com/CSS/faux_columns/index.html)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum