...

View Full Version : Help with css on mac



orange8
05-02-2006, 05:23 PM
Hi,

I have checked the following page and it is valid xhtml and css and it views fine in ie and ff (pc) but I cannot get it to look ok in ff os sf (mac) can anyone help?

http://www.wod.co.uk/arla/arla.htm

Cheers

_Aerospace_Eng_
05-02-2006, 05:52 PM
I don't have a Mac but I believe this will work better.
Try this for your CSS

/*------------------------------------------------------
G L O B A L E L E M E N T S
------------------------------------------------------*/
/*\*/
html {
height:100%;
}
/**/
body {
margin: 0;
padding: 0;
border:0;
height:100%;
background-color:#ffffff
}

/*------------------------------------------------------
C O N T A I N E R
------------------------------------------------------*/

#container {
position: relative;
margin: 0 auto 0 auto;
width: 750px;
font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 0.75em;
min-height:557px;
}
/*\*/
* html #container {
height:557px;
}
/**/
.arla_home {
background-image:url(images/arla_home.jpg);
background-repeat:no-repeat;
}
.arla_kb {
background-image:url(images/arla_kb.jpg);
background-repeat:no-repeat;
}
#sign{
text-align:right;
height:161px;
position:relative;
}
#sign img {
position:absolute;
right:0;
top:0;
}
#content{
width:450px;
float:left;
padding-bottom:25px;
}

#footer{
background-color:#FFF;
color: #000;
text-align:right;
clear:both;
position:absolute;
width:100%;
bottom:0;
left:0;
}

/* menu stuff */
#menu {
float:left;
width:224px;
margin-right:30px;
display:inline;
}
#menu ul {
list-style-type:none;
margin:0;
padding:0;
}
#menu li a
{
display: block;
color:#36C;
background-color:inherit;
text-decoration: none;
width: 219px;
margin-left:5px;
}
#menu li a:hover {
color:#FFF;
background-color:inherit;
}

#faq {
float:left;
width:450px;
}
#faq ul {
list-style-type:none;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
and this for your code, notice the class in the container div. This to specify the background image rather than make a div for it.

<div id="container" class="arla_home">
<div id="sign">
<img src="images/arla_sign.jpg" border="0" usemap="#Map" alt="Arla Foods sign post"/>
<map name="Map" id="Map">
<area shape="poly" coords="24,41,63,83,63,103,17,70" href="#" alt="contact Arla" />
<area shape="poly" coords="63,53,63,68,109,34,103,10" href="index.htm" alt="Home" />
<area shape="poly" coords="59,108,60,126,108,89,104,66" href="arlakb.htm" alt="Key Benefits" />
</map>
</div>
<div id="menu">

<!--<table width="200" cellpadding="0" cellspacing="0">
<tr><td><img src="images/menu_strip.jpg" /></td></tr>
<tr><td ><a class="menu_link" href="arlakb.htm" target="_self">Key benefits</a></td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
<tr><td >Key benefits</td></tr>
</table>-->
<ul>
<li><a href="arlakb.htm" target="_self">Key benefits</a></li>
<!-- <img src="images/menu_strip.jpg" />-->
<li><a href="#" target="_self">Information about the scheme</a></li>
<li><a href="#" target="_self">Application Forms</a></li>
<li><a href="#" target="_self">The role of the Scheme's Trustees</a></li>
<li><a href="#" target="_self">Additional Voluntary Contributions</a></li>
<li><a href="#" target="_self">Frequently asked questions</a></li>
<li><a href="#" target="_self">Expression of wish form</a></li>
<li><a href="#" target="_self">Useful links</a></li>
<li><a href="#" target="_self">How to contact us</a></li>
</ul>
</div>
<div id="content">
<p>At Arla Foods, we have an excellent pension scheme designed especially for you, to give you and your family peace of mind and financial security in retirement. The sooner you start building your pension, the better the benefit will be.</p>
<p>This website has been designed to help you find all the information you need about the Scheme.</p>
<p>The Arla Foods Pension Scheme is a Defined Benefit Pension Scheme. Defined Benefit means the employer guarantees to pay a pension based on the your earnings and length of service. The longer you are in the Scheme, the bigger your pension.</p>
<p>To find out more, click one of the links on the left.</p>
</div>
<div class="clear">&nbsp;</div>
<div id="footer">&copy; Copyright 2006 Arla Foods</div>
</div>

orange8
05-02-2006, 09:10 PM
Cheers, that certainly sort a couple of things out...still does not work in the MAC, but I have a work around that I can do.

_Aerospace_Eng_
05-02-2006, 10:57 PM
Did you even change anything? I did change your code a bit.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum