jquery - Problems with fluid layout in Firefox -
stackoverflow has helped learn lots of cool stuff unfortunately i'm stuck on , don't know how research way out of it....so here goes floating question hope has simple answer.
i've laid out website works great , want, uses great plugin called lemmonslider.js , i've managed make entirely liquid in layout...almost!
the problem works on safari, ios , chrome when test on firefox things go bad, bad. haven't tested in ie can imagine things funky.
below simplified code give idea of i've done...
i've tried using min-height in body, html tag doesn't seem help.
any input hugely appreciated
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> Â Â <head> Â Â Â Â <title>example layout nice folk @ stackoverflow</title> Â Â Â Â <script src="http://code.jquery.com/jquery-latest.min.js" Â Â Â Â type="text/javascript"></script> Â Â Â Â <style type="text/css"> Â Â Â Â Â Â html, body { Â Â Â Â Â Â Â Â width:100%; Â Â Â Â Â Â Â Â height:100%; Â Â Â Â Â Â Â Â padding:0; Â Â Â Â Â Â Â Â margin:0; Â Â Â Â Â Â Â Â background-color:red; Â Â Â Â Â Â } Â Â Â Â Â Â #content { Â Â Â Â Â Â Â Â position:absolute; Â Â Â Â Â Â Â Â top:50%; Â Â Â Â Â Â Â Â margin-top:-25%; Â Â Â Â Â Â Â Â width:100%; Â Â Â Â Â Â Â Â height:50%; Â Â Â Â Â Â Â Â background-color:blue; Â Â Â Â Â Â Â Â overflow:hidden; Â Â Â Â Â Â } Â Â Â Â Â Â #content ul { Â Â Â Â Â Â Â Â position:relative; Â Â Â Â Â Â Â Â margin:0; Â Â Â Â Â Â Â Â padding:0; Â Â Â Â Â Â Â Â height:100%; Â Â Â Â Â Â Â Â background-color:yellow; Â Â Â Â Â Â } Â Â Â Â Â Â #content li { Â Â Â Â Â Â Â Â list-style:none; Â Â Â Â Â Â Â Â float:left; Â Â Â Â Â Â Â Â height:inherit; Â Â Â Â Â Â Â Â background-color:orange; Â Â Â Â Â Â Â Â margin:0px 10px 0px 10px; Â Â Â Â Â Â } Â Â Â Â Â Â #content img { Â Â Â Â Â Â Â Â height:inherit; Â Â Â Â Â Â } Â Â Â Â </style> Â Â Â Â <script type="text/javascript"> Â Â Â Â Â Â $(window).bind('resize', function () { Â Â Â Â Â Â Â Â location.reload(); Â Â Â Â Â Â }); Â Â Â Â </script> Â Â </head> Â Â <body> Â Â Â Â <div id="content"> Â Â Â Â Â Â <ul> Â Â Â Â Â Â Â Â <li> Â Â Â Â Â Â Â Â Â Â <img src="any/sized/image" /> Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â <li> Â Â Â Â Â Â Â Â Â Â <img src="any/sized/image" /> Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â <li> Â Â Â Â Â Â Â Â Â Â <img src="any/sized/image" /> Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â <li> Â Â Â Â Â Â Â Â Â Â <img src="any/sized/image" /> Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â Â Â <li> Â Â Â Â Â Â Â Â Â Â <img src="any/sized/image" /> Â Â Â Â Â Â Â Â </li> Â Â Â Â Â Â </ul> Â Â Â Â </div> Â Â </body> </html>
change #content
#content { position:absolute; top:25%; width:100%; height:50%; background-color:blue; overflow:hidden; } other wise... if not invested in css. totally recommend using 1140 grid. pretty cool cause grid comes media queries responsive design.
hope works you
cheers
Comments
Post a Comment