By ridolfidesigns on

Hi,

I am creating a theme using the zen sub-theme. However, I am having a problem with the right sidebar being pushed below the content. What's weird, is that it only happens when I have more than one blog teaser on the home page. I am using a panel page on the home page but it was doing this before I created the home page with a panel page.

I checked out spacing of everything in firebug as well as IE and it doesn't seem to be off. When I put in another blog teaser it acts as if there is NOT enough room. I can't seem to figure out what is going on. Any help would be appreciated.

Comments

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

It sounds like a float issue, like you say, there is probably not enought space for the right sidebar, so it starts moving down. It's rather hard to help you solve this without seeing it myself; do you have a link?

ridolfidesigns’s picture

ridolfidesigns commented

Unfortunately, I don't. I am testing it locally on my computer before I put it up on the server.

Maybe I can put up a demo using my website and the sandbox module.

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Most browsers will let you save the html output + all images and css files. You can just upload that; as long as source code and linked files are there, it doesn't matter that it's not dynamically generated by a drupal installation.

ridolfidesigns’s picture

ridolfidesigns commented

I did "save page as" and it didn't save the images and styling. Is there something else I should do?

Thanks,

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

try firefox + this addon: https://addons.mozilla.org/en-US/firefox/addon/4723

ridolfidesigns’s picture

ridolfidesigns commented

Ok, I uploaded it to my server. You can view it here: http://ridolfidesigns.com/Drupal.html

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I can't find the exact solution immediately (don't have mucht time now) but I can see that the math just isn't right. div#page is 960px wide, but div#content is 760px and div#sidebar-right is 300px wide. In my world, 760+300 > 960, so that will never fit. Did you carefully follow the instructions in the comments of layout.css when adjusting the widths of your columns?

ridolfidesigns’s picture

ridolfidesigns commented

I thought it was a math problem too but I made the page width set to 2000px and that still didn't work.

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Yeah, I tried that too, but it wasn't that simple unfortunately.
Sorry to repeat my question but: Did you carefully follow the instructions in the comments of layout.css when adjusting the widths of your columns? I have experienced that the Zen layout method has some advantages, but you really have to follow the rules.

ridolfidesigns’s picture

ridolfidesigns commented

I thought I did. I guess I didn't if it isn't working. I did another website that has a similar layout but I didn't have this problem. Anyways, I just started it over but I am paying a little bit more attention so I can see what I did wrong. So far I am not having a problem.

Thanks for your help.

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

sunset_bill’s picture

sunset_bill commented

I had the same thing with a theme I'm working on, first as a Zen subtheme and then as a theme based on Frameworks--my stuff looked fine on Firefox, Opera and Safari, but came out as crap on IE, with the right sidebar at the bottom of the page. Did a lot of researching and found that IE doesn't handle float properly, even when there's plenty of room for the element; for IE, you need to specify a position instead of a float. The best trick I've found for this is the underline hack: IE will recognize a setting starting with '_', while other browsers ignore it. So, what I do is have floats for standards-compliant browsers, and use position for IE, as follows:

#sidebar-right {
float:left;
margin-left:14px;
_float: none;
_position: absolute;
_margin-left: 723px;
}

Standards-compliant browsers will float my sidebar 14px to the right of the center element, IE positions it 723px to the right of the left edge of the containing element.

Elements with position: absolute need to be inside an element with position: relative, so my main container element, which holds both sidebars and the content area, looks like 

#main {
clear: both;
float:left;
_float: none;
_position: relative;
_height: 700px;  /* so IE will put my footer at the bottom of the page, too, instead of somewhere in the middle */
_overflow: auto;
}

This works for me on both IE6 and IE7.

Hope this helps,
SB

PS--for anybody doing theming or CSS, I highly recommend browsershots.org, which lets you see how your stuff looks on a w-i-d-e variety of browsers

ridolfidesigns’s picture

ridolfidesigns commented

This isn't an IE problem. Sorry if I didn't clarify that.

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

yuriy.babenko’s picture

yuriy.babenko commented

I disagree with the "IE hates floats" comments. I use floats in every layout I make (all CSS based) and they all look fine in IE (6/7/8). The only problem I've ever encountered with IE+float is there not being enough space for the element due to IE's "unique" way of handling margins - this is easily solved by overriding the CSS in an ie-only CSS file and decreasing them the margin(s) by a few pixels.

---
Yuriy Babenko
www.yubastudios.com
My Drupal tutorials: http://yubastudios.com/blog/tag/tutorials

---
Yuriy Babenko | Technical Consultant & Senior Developer
http://yuriybabenko.com

Jeff Burnz’s picture

Jeff Burnz commented

Floats work absolutely fine in IE, except for a few minor issues that nothing more than setting a width, holly hack, setting hasLayout or messing with paddings, margins & clearing floats properly wont solve.

9/10 you don't have to worry so much about these things since you just build them into your normal designs. For example setting a width or height triggers hasLayout. Most times I end up with very few IE over rides, for example Pixture Reloaded has only 4 (its a complex liquid design with rounded corners) and absolutely zero hacks.

Where you really run into issues with IE6 is with things like chaining selectors, pseudo selectors and pattern matching etc etc.

BTW, the underscore hack only works for IE6.

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

ridolfidesigns commented

Ok, so the problem that I was having was caused by FCKeditor. I am not sure if I didn't have it configured right or what was going on. I deleted the code created by FCKeditor and the site went back to normal.

Thanks,

Eric
Ridolfi Designs
http://ridolfidesigns.com
http://myspace.com/manofvalor25

SamRose’s picture

SamRose commented

This problem will happen in Zen theme if there are html tags that are left unclosed in teasers

kip stanning’s picture

kip stanning commented

hi samrose, i was searching for hours to find out why the sidebar on one single page had moved below content while it floated nicely on all other pages. your hint saved me! i had changed html tags on that page and accidently doubled a closing tag. thx and greetings to malaysia! karl

politiktraining.at | politiktraining.net