Views Rotator block centered in IE6/7 left aligned in everything else
| Project: | Views Rotator |
| Version: | 6.x-1.0-alpha |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Hello,
Im just getting started with Drupal (and web design too for that matter) so may I apologies in advance if anything isn't clear.
Details of modules and themes concerned:
6.x-2.0-rc6 CCK
6.x-2.0-rc1 Views
6.x-1.0-alpha Views Rotator
6.x-1.0 Pixture_Reloaded (theme)
Inspired by these guys I'm trying to set up banner graphic that cycles through several nodes of images and text that'll be displayed as a block on the front page of a website in a region that spans the width of the website (see here for a sketch of the regions of the theme Im using). To do this I've created a content type with CCK for each “cell” of the animated block, the body of which one of the four is:
<div style="background-image:url(http://www.eilireland.org/drupal/sites/all/files/images/camel2.jpg);background-repeat:no-repeat;background-position:center;width:700px;height:200px;display:block;margin-left:auto;margin-right:auto;position:relative;">
<div style="position:absolute;top0px;left:50px;color:white;padding:10px;width:280px;text-align:left;">
<h1>Aenean imperdiet</h1>
<p>Lorem ipsum dolor sit amet, <a href="http://news.bbc.co.uk" target="_blank">BBC News</a> consectetuer adipiscing elit. Vivamus at arcu elementum felis tristique iaculis.</p>
</div>
</div>
I then created a block view with Views2, using Views Rotator as the style, then moved the block into the header region of the theme Im using: Pixture_Reloaded. It works quite nicely as you can see here at my sandbox site.
The problem Im having is that I cant figure out how to center the block in this region. The preview of the block in the ViewsUI shows it centered in the page; if I use an unformated style and just display the “cells” in a block stacked one one another, they appear in the center of the region; if I disable Javascript the unanimated first “cell” of my rotator block appears in the center of the region; and a little irksomely the rotating block is centered in IE6 and 7, the problem only manifests in Firefox, Safri, Chrome etc.
I've tried using the latest dev snapshot of Views Rotator, but it didnt fix the situation.
Is there something Im doing wrong?
Thanks.
#1
Getting the positioning of content to work correctly across firefox, safari, IE6/7, and Opera can be a real pain. Especially with IE6. I understand your pain. But, I'm not seeing the problem you describe. In IE, Firefox, and Safari the block is centered in my browser. Did you fix the problem?
#2
Hello,
I've just been poking at the site. By manually adjusting the size of the region in which the block sits to the width of my banner and by giving it a margin-left:auto and margin-right:auto it's now centered. However that does feel to be a bit of a work around.
Poking at it with Firebug the position of each cell that makes up a rotating block is wrapped in the following:
div class="views-rotator-item" style="position: absolute; top: 0pt; left: 0pt; z-index: 2; opacity: 0; display: none;"
If I edited out that top left positioning in Firebug it appears centred. Where is the positioning comming from?
EDIT: I've reset the site so you can see it in action.
Thank you.
#3
I see. First, let me explain why this is happening and then I'll fill you in on a solution that's not a hack for theming this.
The position:absolute, top and left on the views-rotator-item are inserted by the javascript. It's part of the jQuery cycle plugin which performs the transitions. You can find details on this script at http://malsup.com/jquery/cycle/.
This is required for transitions other than fading in and out. Other transitions will be coming to this module soon so I don't want to get rid of it. Plus, I'd like to stay in sync with the cycle plugin for releases.
Now, for the solution. For overall positioning position the actual rotating area. Some psuedo html:
<div id="views-rotator-banner_rotator-block_1"><div class="views-rotator-item">content</div>
<div class="views-rotator-item">content</div>
<div class="views-rotator-item">content</div>
<div class="views-rotator-item">content</div>
</div>
Center the div with the id views-rotator-banner_rotator-block_1. Then put a width on it with auto right and left margins. This works (I tested with your html) and it sounds like this is what worked for you already.
I hope this helps. I understand you frustration with this. Some things just need to be done a certain way for JavaScript to do what it does and for CSS to work across multiple browsers (this is a headache in and of itself).
#4
Hello,
Thank you problem resolved, and thank you too for the explanation of what was going on behind the scenes. Im still finding my feet with Drupal and indeed web design, I appreciate the insight you've offered.
Regards.
#5
Thanks
temp
Automatically closed -- issue fixed for two weeks with no activity.
#6
Automatically closed -- issue fixed for two weeks with no activity.