Posted by Reid on February 15, 2010 at 10:24pm
Hi,
I'm hoping I can get a bit of advice from the group.
I'm using Panels for the front page of a site currently in development, http://test.gab.wi.gov, and the image I'm using keeps breaking the layout when using I.E. 7 on monitors with standard screen resolutions (for example, an old Thinkpad). Firefox and Chrome work fine -- I haven't tried a Mac yet. Any suggestions of sizing the image or using CSS to control its display?
I'm also thinking about using rotating images on the front page. Any suggestions for modules or javascript to accomplish a slideshow?
Any other feedback you folks have on the site would also be greatly appreciated.
Thanks,
Reid Magney
Wisconsin Government Accountability Board
Madison
Comments
Looks fine in IE8. I can't
Looks fine in IE8. I can't look too far into your CSS issue... but it is that.
For the slideshow, you might want to look at viewscarousel
Image Rotate Script
Have you tried using a "if screen res = x then display different image"?
Re: image rotate script...This is what we use on our site (www.goteam4.com):
Head script:
<script type="text/javascript">
var c=1
var s
function changeHeader()
{
c = (rand(1,28));
$('img#headers').attr("src","<?php echo $path; ?>/images/headers/header-image"+c+".gif");
s = setTimeout("changeHeader()",10000)
}
function rand( min, max ) {
var argc = arguments.length;
if (argc == 0) {
min = 0;
max = 2147483647;
} else if (argc == 1) {
throw new Error('Warning: rand() expects exactly 2 parameters, 1 given');
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
Image script:
<!-- Menu header area -->
<div id="header-menu"><?php print $header; ?></div>
<div id="header-lower"></div>
<!-- header main image -->
<div id="header-image">
<a href="<?php echo base_path()?>"><img id="headers" src="<?php echo base_path().drupal_get_path('theme', 'yourthemename') ?>/images/headers/header-image1.gif" alt="" /></a>
</div>
I don't have a copy of IE 6,
I don't have a copy of IE 6, but it looks ok when using a browser preview site: http://ipinfo.info/netrenderer/
Sorry I don't have any advice on that one.
JQuery is another really simple way to do rotating images. You might check out Cycle http://malsup.com/jquery/cycle/ or Cycle Lite http://malsup.com/jquery/cycle/lite/
BTW, looks like some interesting content--I'll be watching for this site to go live!
Nice Looking Site
Nice looking site, but if I can offer some suggestions.
First off I'd let the picture and the border surrounding be whatever they are meant to be. Allowing the picture to scale is likely what is causing problems. Remove the tags that are causing it to scale with the page. On a wide screen monitor the "width: 100%" is causing it to pixelate. You can use the browser to scale down images, but this is typically a waste of band-width, and server side processing uses better algorithms for handling this. In short your pictures will look better if you don't allow the browser to scale them. The width: 100% on the picture may be what is causing different browsers to handle the picture differently. Now you can scale .svg images, that is what they are meant for, but not photos such as jpg or png.
Doing this however will upset your design somewhat because you'll have a lot more white space on the larger monitors. You might want to apply the following css to #page.
#page{
max-width: 1050px;
}
If your site still doesn't display very well on smaller monitors I'd make the picture smaller and also reduce that max-width.
I hope this helps, good luck!
Might want to look at this page
You also might want to look at this page as well:
http://drupal.org/node/418616