By zanlus on

I have been using Drupal for 4 years and I have never seen this happen.

The page I'm working with is here: (page not currently live, but will be live shortly)
http://www.anisa.org.za/news2

When the page loads, it loads perfectly in FF and S (still to test others).

The links in the brown box are internal links to div tags, dealing with various news categories. If you click on one of the links in the brown box, the content above that div disappears on the page in both FF and S.

<a href="#news_church"><span class="first-letter">C</span>hurch & <span class="first-letter">T</span>heology</a>&nbsp;|&nbsp;

Can anybody point me in the right direction?

⋅ Categories: Drupal 6.x

Comments

blackarma’s picture

blackarma commented

Hmm.. that's something new :)
You should definitely change this to not put your content under header

margin-bottom:-19990px;
padding:0 0 20000px;

from your #sidebar-right and #content in your layout.css

zanlus’s picture

zanlus commented

1) What does this have to do with the internal link? Please explain.

2) Those margin and padding settings are there because they provide equal column lengths. Do you have a better suggestion for creating equal column lengths?

Thanks.

ionut.alexuc’s picture

ionut.alexuc commented

This is my point of view. In my opinion you have some strange settings in .css.
I will detail a few that I can see with firebug.

1. #page has "max-width:1024px;min-width:800px;" - could you set it to a fixed width?

2. #content has:
float:left;
margin-bottom:-19990px;
margin-left:0;
margin-right:-100%;
overflow:hidden;
padding:0 0 20000px;
width:100%;

i. Use a normal values for margin and padding. There is no reason to use those values.
ii. set overflow to visible, not hidden.
iii. You want to have two columns with float: left, then use a fixed width, not 100%.

I set this values with firebug and I get some good results.
You can try them:

#main-inner {
margin:0;
overflow:visible;
}

#content {
float:left;
margin-left:0;
overflow:visible;
width:800px;
}

.sidebar-right #content-inner {
padding-left:10px;
padding-right:0px;
}

#sidebar-right {
float:right;
margin-right:0;
overflow:visible;
width:200px;
}

Your content will not disappear, but you still have a lots of issues in #content-inner.

Maybe it could be a good idea to start the theme from zen.

zanlus’s picture

zanlus commented

1. It is that way to accommodate 1024x768 and 800x600 displays. Since this site serves Africa, that ability is important. Moreover, what does this have to do with the problem I'm asking about?

2. I can see that this resolves the internal links issue, but it destroys the equal column lengths, which are more valuable. Any alternative suggestions for how to slay the equal columns beast.

blackarma’s picture

blackarma commented

If you use table layout you can get equal heights with 100% sizes.
If you use div'ed layout you can get it done with jQuery plugin Equal Height Columns with jQuery
Or you can do this good css trick by A List Apart Faux columns

matdab’s picture

matdab commented

Not sure whether it is the same problem, but I had similiar case: after clicking internal link, one line from the top of the content was disappearing and the content also went one line to the top. I've discovered that the first problem was caused by the dot in content element:
Was:

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

Should be:

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

The second problem was caused by the overflow hidden element in css:
Was:

#content {
  float: left;
  width: 100%;
  margin-right: -100%;
  padding: 0;
  overflow: hidden;
}

Should be:

#content {
  float: left;
  width: 100%;
  margin-right: -100%;
  padding: 0;
  overflow: visible;
}