...

View Full Version : Firefox Alignment Issues



SubScriptZero
02-17-2012, 04:18 PM
Hello,

On a website I'm working on when the page is loaded in Safari/Chrome/IE it looks fine, however, when its loaded in Firefox, the Infinite Carousel seems to be WAY out of alignment. IE originally had a similar issue, but a small fix in the Head tag allowed me to circumvent the issue. I'm not used to Firefox messing up, so I'm completely stumped.

Here is the code for the Infinite Carousel


<div id="carouselwrap"><div id="kill"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/storage/js/infinitecarousel/jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel();
});
</script>
<style type="text/css">
#carousel {
margin:0 auto;
padding-right: 0px; /*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
padding-left: 0px;/*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
width:860px;
height:150px;
overflow:scroll;
border:0px solid #fff;
}
#carousel + div {
margin:0 auto;
}
.textholder {
text-align:left;
font-size:small;
padding:6px;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
</style>
<div id="carousel">
<ul>
<li><a href="http://thinkluton.squarespace.com/"><img alt="" src="http://thinkluton.squarespace.com/storage/homeslideone.jpg" width="860" height="150" /></a><p>Welcome To The Think Luton Website</p></li>
<li><a href="http://thinkluton.squarespace.com/locate-to-luton/"><img alt="" src="http://thinkluton.squarespace.com/storage/homeslidetwo.jpg" width="860" height="150" /></a><p>Relocate To Luton</p></li>
<li><a href="http://thinkluton.squarespace.com/contact-us/"><img alt="" src="http://thinkluton.squarespace.com/storage/homeslidethree.jpg" width="860" height="150" /></a><p>Network With Us On Linked In</p></li>
</ul>
</div>
</div>
</div>
<div id="breaker">
<img src="http://thinkluton.squarespace.com/storage/topbreaker.png"/>
</div>


Here is the CSS for it


#carousel ul {
list-style: none;
width:2580px;
margin: 0;
padding: 0;
position:relative;
}
#carousel li {
display:inline;
float:left;
}


(Issue is on the homepage)
Link to website: http://thinkluton.squarespace.com/
Personally I hate squarespace, however, the client insisted on it.

The first screenshot is of it in Chrome and the second is of it in Firefox.

Any help would be much appreciated.

Thanks,
Sam

SB65
02-17-2012, 04:40 PM
Try:


#carouselwrap{clear:left}

SubScriptZero
02-17-2012, 05:39 PM
Try:


#carouselwrap{clear:left}

It worked!! Awesome thankyou!!!

2 Things;

1: Why did it work? (So I can know for future reference)

2: Any chance you know how to fix the slight difference in pixel height on the lower blue box?

Its a few pixels further down in Firefox than in any of the others.
I'm not sure what to do without affecting how other browsers display it.

Thanks Again!

SB65
02-17-2012, 05:58 PM
You've got a lot of floated elements in the header, and the div wasn't clearing all of them - it was butted up against the twitter link. Different browsers clear floats in different ways - it's one of the more common differences between FF and Safari/Chrome, in my experience.

Blue box - you mean Airports/Aerospace? That's currently wrapped in #homefloat unlike the other boxes - can it not be included in the same div and positioned after #contentwrapper? That would be the best solution. Otherwise you're relying on absolute positioning which'll need changing every time you alter the content.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum