Cross-browser Issue?

Question

I have been working on this website for a couple days now, until i did what most web developers fear, look at the site with other browsers, such as IE and Firefox. For some reason, the logo ticker in Firefox is not dropped down like it would be in Google Chrome. Here is the website. I have tried to fix it on my own, looking through my source code, but found nothing i did wrong. What could be causing this issue in Firefox?

here is my CSS:

.list_carousel { background-color: #FFF; margin: 0 0 30px 60px; width: 360px; } .list_carousel ul { margin: 0; padding: 0; list-style: none; vertical-align:middle; } .list_carousel li { font-size: 40px; color: #999; text-align: center; vertical-align:middle; background-color: #FFF; width: 50px; height: 75px; line-height:75px; padding: 0; margin:6px; float: left; } .list_carousel li img{ vertical-align: middle; display:inline-block; opacity: 0.8; } .list_carousel li img:hover{ vertical-align: middle; display:inline-block; opacity: 1; } .list_carousel.responsive { width: auto; margin-left: 0; } .clearfix { float: none; clear: both; }

Nice Google Chrome: enter image description here

And FireFox: enter image description here

Because you are floating the 2 available elements in the div, the container div does not have the height set. You would need to do the clearfix — Sushanth --
– Sushanth --, Commented Jul 21, 2013 at 2:39

MisterBla · Accepted Answer · 2013-07-21 02:46:20Z

2

Add

clear: both;

to .list_carousel, that'll fix it.

answered Jul 21, 2013 at 2:46

MisterBla

2,3951 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hunter Mitchell Over a year ago

Thanks for your comment above! Really, nothing does work in IE. Thanks for answering my Question.

MisterBla Over a year ago

No problem! Ever since I discovered with clear actually does, I've been using it so much with webdesign. Use it in conjunction with float and you're set!

Sushanth -- · Accepted Answer · 2013-07-21 02:46:07Z

If all the elements inside the Container are floated then the container will not have any height.

Add the class clearfix to the <div class="LogoContainer"

.clearfix { *zoom: 1; } .clearfix:before , .clearfix:after{ display: table; content: ""; line-height: 0; } .clearfix:after{ clear: both; }

This should solve the issue on the all the browsers.

Collectives™ on Stack Overflow

Cross-browser Issue?

2 Answers 2

2 Comments

1 Comment

Hot Network Questions