OFBiz

Problem Integrating External html/css in ofbiz - causing frontend distortion

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

1 message

Rohit

Problem Integrating External html/css in ofbiz - causing frontend distortion

Hi,

I am a web designer. We have development people aswell.
I have an issue with OfBiz is that we have some html/css files which are perfect when we see them offline and which are browser compatible aswell. But when we integrate them in ofbiz in ftls they dont behave consistently across browsers.

We try to investigate using a small piece of code say for footer to look for its behavior across browsers, but nothing seems to be working.

Please any one can help me in getting this problem resolved layout per say.

Here's my code:

## CSS ##

/* ### GENERAL ### */
* { margin: 0px; padding: 0px; }
html, body { font-family: Calibri; font-size: 12px; color: #666666; }
input, select, textarea { font-size: 12px; font-family: Calibri; color: #666666; }
body { background: #fff url(../images/header-bg.gif) top center no-repeat; }
.bg { background: url(../images/body-overlaybg.gif) top center repeat; }
.bg1 { background: url(../images/sell-car-landing-maskbg.jpg) top center repeat; }
img { border: 0px; }

/* ### GLOBAL CLASSES ### */
.clear { clear: both; overflow: hidden; height: 0px; }
.floatl { float: left; }
.floatr { float: right; }

/* ### WRAPPER ### */
#wrapper { width: 100%; min-height: 100%;}

/* ### MAIN CONTAINER ### */
#mainCntr { margin: 0 auto; width: 1049px; position: relative; }
#mainCntr a.toolkit { position: absolute; top: 188px; left: -90px; text-decoration: none; font-size: 14px; font-weight: bold; color: #fff; display: block; text-align: center; width: 70px; height: 84px; line-height: 30px; background: url(../images/toolkit-bg.gif) top left no-repeat; }

/* ### FOOTER CONTAINER ### */
#footerCntr { width: 1049px; padding-top: 50px; MARGIN: 0 AUTO; padding-bottom: 165px; background: url(../images/footer-shadowbg.gif) center bottom no-repeat; }

/* ## ADDED BY TCS GGN ## */
#footerCntr { width: 1049px; margin: 0 auto; }

#footerCntr #footer { width: 1049px; margin: auto; height: 202px; position: relative; }
#footerCntr .copyright { padding-left: 20px; float: left; width: 125px; }
#footerCntr p { padding-top: 25px; font-size: 13px; }
#footerCntr ul { padding: 0px 13px; list-style: none; height: 140px; overflow: hidden; float: left; border-left: 1px dotted #b6b6b6; }
#footerCntr li { padding-bottom: 9px; }
#footerCntr li span { font-size: 16px; font-weight: bold; color: #f7941d; }
#footerCntr li a { text-decoration: none; font-size: 13px; color: #8b8d8c; }
#footerCntr li a:hover { text-decoration: underline; }
#footerCntr span.number { position: absolute; bottom: 0px; right: 0px; display: block; float: right; width: 311px; height: 16px; text-indent: -9999px; background: url(../images/customer-care-number.gif) top left no-repeat; }

#### html file with footer layout only #####

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Carnation.in</title>

<link rel="stylesheet" href="../stylesheets/global.css" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="footerCntr">

<div id="footer">

<div class="copyright">

<p>Â© 2010 carnation.in<br />All Rights Reserved.</p>

</div>

<ul>
<li>All Cars</li>
<li>Top cars</li>
<li>Cars By Brand</li>
<li>Cars By make</li>
<li class="last">Cars Index</li>
</ul>

<ul>
<li>Buy Cars</li>
<li>Buy New</li>
<li>Buy Pre-Owned</li>
</ul>

<ul>
<li>Sell Cars</li>
<li>List Your car</li>
</ul>

<ul>
<li>Finance & Insurance</li>
<li>Get Finance</li>
<li>Calculators</li>
<li>Apply for Insurance</li>
</ul>

<ul>
<li>Accessories</li>
<li>What’s Hot</li>
<li>Browse Accessories</li>
<li>On Sale</li>
</ul>

<ul>
<li>Help & Support</li>
<li>FAQ’s</li>
<li>Support Request</li>
<li>Driving Tips</li>
<li>Resource Centre</li>
<li class="last"></li>
</ul>

<ul>
<li>Corporate</li>
<li>About Us</li>
<li>Newsroom</li>
<li>Locations</li>
<li>Careers</li>
<li class="last">Contact Us</li>
</ul>

<div class="clear"></div>

customer care - 1800 425 1221

</div>

</div>

</div>

</body>

</html>

Thanks very much.....if any body can help!!!