By shrill on

Hi everyone.

I'm working on a website, using a custom theme and most of it looks how I want but I still have some presentation issues. I'm listing them all because I think they may be related. I'm not bad with CSS but I'm having trouble using it with Drupal. I do have firebug but am still stuck.

Website is http://www.belkantoclients.com/aaswg-website (aaswg/Sunshine23)

1) Overlaps on the blog. This happens in IE, not in Firefox or Safari. It happens in a version of a view I am working on that has a teaser list for the blog.
It also happens with full nodes. http://www.belkantoclients.com/aaswg-website/blog/community-news

2) Problems with alignment of forms and some other content. Eg. http://www.belkantoclients.com/aaswg-website/comment/reply/191#comment-form. This happens in both browsers and is fairly widespread. For instance, when creating content, the forms start after the last block in the left hand bar, and take up the entire width (rather than just the right hand column).

Any thoughts as to what can be causing these issues?

⋅ Categories: Drupal 5.x

Comments

awolfey’s picture

awolfey commented

I add this and fixed the comment problem in #2.

.box {
float:left;
}

But I didn't test it beyond that one page.

Jeff Burnz’s picture

Jeff Burnz commented

For #2 you need to do 2 things to #main2:

1) get rid of the "display: inline" and set a left margin equal to the width of the sidebar + gutter, for example, the entire declaration could be as this:

#main2 {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 12px;
  margin: 0 0 0 240px;
}

The float suggested by the above poster does not address the root issue - you are setting heights, min-heights, display: inline, display: relative etc etc all over the place, consider ripping it all out and start afresh with a clear head and clean CSS.

All that 100% height, min-height, display:inline guff is not the solution, but rather simply masks the inherent layout error (no left margin on #main2).

IE issues. well the above will fix all the left sidebar issues but the text overlapping has got to be some weird inheritance issue in IE, I would think after ripping out all the work-arounds that might come right, that just should't happen with the html I see in the page.

pS: if you want my attention, always use a title like "Weird CSS issue has me stumped" etc, it's like honey to the bee for me;) Good luck!

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
shrill’s picture

shrill commented

This forum is what I love most about Drupal...you can bang your head against a wall for weeks and then have your question answered within a couple hours.

Thanks very much jmburnz...that certainly fixed the left hand bar issues. I removed a bunch of the floats, heights etc (had to keep some to keep it working...)., but still have the IE issue. The only other issue I've noticed so far is that in the user profile, the text for the profile starts below where the left bar ends. It is in the right bar though, which is a step in the right direction (it was in the left bar before)...

Thanks again,

Shrill

Jeff Burnz’s picture

Jeff Burnz commented

On second look.

Hmmm, have you tried changing the underlying html in those pages with the overlapping text? I see you using <b>...</b> for headers and <br /> for line breaks.

How about some standard <h3>...</h3> for headers and proper <p>...</p> for paragraphs?

I also noticed some errors in your CSS that could be contributing (could be more, try validating it to find them all):

.menu .collapsed { <-- no closing curly brace
.block block-user h2 <-- should be #block-user

Some odd things can trigger odd bugs in IE, this one I have seen before but I just can't remember what the problem was :/

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
shrill’s picture

shrill commented

your comment reminded me that I had put an IE if statement in the page.tpl...I removed that, and it fixed the problem with the overlapping text. Yippee!!

Unfortunately, removing it means that the text in IE is now part way down the page...(which is why I put the if statement there in the first place)

so close...

Shrill

shrill’s picture

shrill commented

Found the solution here: http://drupal.org/node/25837

I just created a new div around the content and floated it to the left. Now just need to figure out why the titles are indenting.

Cheers,

Shrill

shrill’s picture

shrill commented

Okay, I can't figure out why the titles are indenting. I thought my breadcrumb wrapper div wasn't closing but maybe I was seeing things.

Thoughts?

Here's the page.tpl

<div id="main2">
<div class="breadcrumbwrapper">
<?php print $breadcrumb ?><?php if ($title != ""): ?>&nbsp;&raquo; <?php print $title ?><?php endif; ?>
</div>
<h1><?php print $title ?></h1>

<div id="content-area">
<?php print $content ?>
</div>
</div>

and the generated source:

<div id="main2">
<div class="breadcrumbwrapper">
<div class="breadcrumb"><a href="/drupal/">Home</a></div>&nbsp;» About the Organization</div>
<h1>About the ...</h1>

<div id="content-area">
  <div class="node">
            <span class="submitted"></span>
    <span class="taxonomy"><ul class="links inline"><li class="first last taxonomy_term_15"><a href="/drupal/aaswg/about" rel="tag" title="Pages about the ..." class="taxonomy_term_15">About</a></li>

</ul></span>
    <div class="content"><!--paging_filter-->Fun content goes here

</div>
         <div id="bottom">
        </div>
  </div>
</div>
</div>
Jeff Burnz’s picture

Jeff Burnz commented

You are doing something funky with the Breadcrumb.

Kill the padding-bottom on the .breadcrumb and all your prayers will be answered.

style.css (line 321)
.breadcrumb {
padding-bottom:0;
}

Are you using Firebug? If not, you should be - http://getfirebug.com/

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
shrill’s picture

shrill commented

Everything is fixed now (or at least everything I know about). Thank you!!!

Shrill

shrill’s picture

shrill commented

In IE6 (of course), my text ends up shoved way to the end of the page. Thoughts on a workaround? It also has a few issues in IE 5.5.

Cheers,

Shrill

Jeff Burnz’s picture

Jeff Burnz commented

IE5.5! Wow, I dropped support for it a least 2 years ago or more.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
shrill’s picture

shrill commented

It is more 6.0 I'm worried about.