PDA

View Full Version : Page works fine in IE6 & IE7, alignment and positioning out in Firefox :(



pj51182
Apr 27th, 2007, 04:20 PM
Iím currently developing a new web site for the company I work for, I have been developing it in Firefox and have been heavily using the HTML validator and other excellent web design add-ons. Unfortunately Iím now stuck, the page seems to be out by a few pixels between Firefox and IE, in essence I have a choice of either it looking like it should in either of the browsers, just not both at the same time. The page has no errors on it and I have kept to the web standards as far as I can see ďThe validated page has no errors, no warning found by the SGML Parser and HTML Tidy.Ē Any idea where Iím going wrong? :confused:

www.carousellogistics.co.uk/euro/specialist.html

www.carousellogistics.co.uk/css/carousel.css

Thanks,

Phil

Excavator
Apr 27th, 2007, 06:04 PM
Goodmorning ,
This is a good example of how validated code is not always the best way to go. See Pitfalls of Absolute Positioning. (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

I think the "out by a few pixels " your talking about is the jog .orange has? Move your text up a bit and it goes away:

.strap {
FONT-SIZE: 12px;
Z-INDEX: 3;
LEFT: 240px;
WIDTH: 670px;
COLOR: #ffffff;
FONT-FAMILY: Tahoma, Verdana, Arial, sans-serif;
POSITION: absolute;
/*TOP: 375px; <---I changed this*/ HEIGHT: 50px
}

A couple things that are odd, giving a div the same id and class name may not be the best idea - <DIV class=orangeline id=orangeline>. It could be the only reason that validates is you have no #orangeline in your CSS.


===
Also, .orangeline is 600x2 but the image your putting in it is 826x10. Since it's a solid color, why use an image at all? Try this instead:
CSS:
#blackmenu {
display:inline;
width: 170px;
float: left;
padding-left: 0px;
margin-top: 0px;
height: 358px;
border-bottom: 10px solid #feb801;
background: #000000;
margin-left: 60px;
}
#largeimage {
MARGIN-TOP: 0px;
DISPLAY: inline;
FLOAT: left;
MARGIN-BOTTOM: 0px;
MARGIN-LEFT: 0px;
WIDTH: 680px;
HEIGHT: 358px;
border-bottom: 10px solid #feb801;
}
And, since .orangeline really isn't doing anything, make your markup look like this:
<div id="blackmenu"></div>
<div id="largeimage"><img src="/images/european.jpg" alt="background" /></div>

<!--<div id="orangeline" class="orangeline"><img src="/images/orangebar.jpg" alt="background" /></div>-->

<div id="tag" class="tag"> <b class="orange">T:</b>

<script type="text/javascript" src="/js/phone.js"></script>

pj51182
Apr 28th, 2007, 03:03 PM
OK thanks for the time you took, I will give that a go.

pj51182
Apr 30th, 2007, 09:42 AM
<div id="orangebox" class="menu_specialist"> The text that is out slightly in firefox is contained within the orangebox div...

<div id="orangebox" class="menu_specialist">
<ul>
<li>Hand Carry</li>
<li>Plane Charter</li>
<li>Bespoke Solutions </li>
<li>Export Packaging </li>
</ul>
</div>

The CSS...


/* ORANGE BOX */
#orangebox{ text-align: left; list-style: none;}

#orangebox ul{ margin: 0px; margin-top: 0px; margin-bottom: 0px; line-height: 0.5cm; padding-left: 5px; font-weight: bold; align: right; border-width: 0px 0; list-style: none;}

* html #orangebox ul{ /*IE only rule. Delete extra margin-bottom*/ margin-bottom: 0; margin-top: 0px;}

#orangebox ul li{dispaly: block;}

and the class...


/* ORANGE BOX CONTENT */
.menu_specialist { position : absolute; width : 123px; height : 80px; z-index : 3; left : 170px; top : 167px; background-color: #FFBE02; color: #ffffff;}


Thanks for your help with this so far, using the border rather than an image was a simple solution that worked.