Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Help with css on mac

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I don't have a Mac but I believe this will work better.
    Try this for your CSS
    Code:
    /*------------------------------------------------------
    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.
    Code:
    <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>
    Last edited by _Aerospace_Eng_; 05-02-2006 at 05:55 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Did you even change anything? I did change your code a bit.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •