Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Aug 2005
    Posts
    9
    Member #
    11017
    I am currently working on a site and the layout works fine in FireFox, however, the same cannot be said for IE. I am using CSS to define all layour properties. This problem can be seen by using the following link:

    http://helios.hud.ac.uk/c0359743/project

    I'm not entirely sure what it causing this problem and any advice would be much appreciated. I've attached all the files in a zip file.

  2.  

  3. #2
    Member jagstangman's Avatar
    Join Date
    Jul 2005
    Posts
    31
    Member #
    10690
    it might just be me, but i can't find the attached files anywhere
    ----------
    Steve

  4. #3
    Junior Member
    Join Date
    Aug 2005
    Posts
    9
    Member #
    11017
    Aye, hadn't noticed that one. They should be attatched to my original post now

  5. #4
    Member jagstangman's Avatar
    Join Date
    Jul 2005
    Posts
    31
    Member #
    10690
    The problem was with your CSS for the '#prodMenuHolder'. your width was set to auto. I altered the width to a set value of pixels and it seems to of sorted it though the menu is a bit wider than it origanlly was in Firefox because the 'Hardware menu' text wouldnt fit on one line in IE if the width was anything under 150px.

    Here is the CSS:

    Code:
    BODY {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px;
    MARGIN: 0px; COLOR: #000000; 
    PADDING-TOP: 0px; 
    FONT-FAMILY: Tahoma; 
    BACKGROUND-COLOR: #ccccdd
    }
    
    A:link {
    TEXT-DECORATION: none
    }
    
    A:visited {
    TEXT-DECORATION: none
    }
    
    A:hover {
    TEXT-DECORATION: none
    }
    
    A:active {
    TEXT-DECORATION: none
    }
    
    #linkHolder {
    RIGHT: 15%; 
    BACKGROUND: url(global.jpg) #6699ff; 
    LEFT: 162px; MARGIN: 0px; 
    WIDTH: 525px; 
    POSITION: absolute; TOP: 
    
    21px; 
    HEIGHT: 40px
    }
    
    #globalLinks {
    PADDING-RIGHT: 6px; 
    PADDING-LEFT: 6px; 
    PADDING-BOTTOM: 6px; 
    WIDTH: 500px; 
    PADDING-TOP: 6px; 
    POSITION: absolute; 
    
    TOP: 5px; 
    HEIGHT: 22px
    }
    
    #globalLinks A:link {
    BORDER-RIGHT: #cccccc 1px solid; 
    PADDING-RIGHT: 15px; 
    PADDING-LEFT: 15px; 
    FONT-WEIGHT: bold; COLOR: #ffffff
    }
    
    #globalLinks A:visited {
    BORDER-RIGHT: #cccccc 1px solid; 
    PADDING-RIGHT: 15px; 
    PADDING-LEFT: 15px; 
    FONT-WEIGHT: bold; 
    COLOR: #ffffff
    }
    
    #globalLinks A:hover {
    BORDER-RIGHT: #cccccc 1px solid; 
    PADDING-RIGHT: 15px; 
    PADDING-LEFT: 15px;
    FONT-WEIGHT: bold; 
    BACKGROUND-IMAGE: none; 
    COLOR: #000000; 
    BACKGROUND-COLOR: #ddeeff; 
    TEXT-DECORATION: none
    }
    
    #logoHolder {
    RIGHT: 2%; 
    BACKGROUND: url(logo.jpg) #6699ff; 
    LEFT: 25px; 
    WIDTH: 100px; 
    POSITION: absolute; 
    TOP: 15px; 
    HEIGHT: 100px
    }
    
    #holder {
    RIGHT: 6%; LEFT: 140px; 
    BACKGROUND-IMAGE: url(bg.jpg); 
    MARGIN-LEFT: 6%; 
    WIDTH: 500px; 
    POSITION: absolute; 
    TOP: 130px; 
    HEIGHT: 200px
    }
    
    #prodMenuHolder {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    LEFT: 2%; 
    PADDING-BOTTOM: 0px; 
    WIDTH: 150px; 
    PADDING-TOP: 0px; 
    POSITION: absolute; 
    TOP: 140px; 
    HEIGHT: auto; 
    BACKGROUND-COLOR: #ffffff;
    }
    
    #prodLinks A:link {
    PADDING-RIGHT: 10px; 
    BORDER-TOP: #999999 1px solid; 
    DISPLAY: block; 
    PADDING-LEFT: 4px; 
    FONT-WEIGHT: bold; 
    COLOR: #21536a; 
    BACKGROUND-COLOR: #99ccff;
    }
    
    #prodLinks A:visited {
    PADDING-RIGHT: 10px; 
    BORDER-TOP: #999999 1px solid;
     DISPLAY: block; 
    PADDING-LEFT: 4px; 
    FONT-WEIGHT: bold; 
    COLOR: #21536a; 
    BACKGROUND-COLOR: #99ccff
    }
    
    #prodLinks A:hover {
    BORDER-TOP: #cccccc 
    1px solid; 
    FONT-WEIGHT: bold; 
    BACKGROUND-IMAGE: none; 
    BACKGROUND-COLOR: #ddeeff; 
    TEXT-DECORATION: none
    }
    
    #contentHolder {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    RIGHT: 2%; 
    LEFT: 2%; 
    PADDING-BOTTOM: 0px; 
    WIDTH: auto; 
    PADDING-TOP: 0px; 
    POSITION: absolute; 
    TOP: 20%; 
    HEIGHT: auto
    }
    
    .tl {
    BACKGROUND: url(left.jpg) no-repeat 0px 0px
    }
    
    .mid {
    BACKGROUND: url(mid.jpg) no-repeat 0px 0px; HEIGHT: 33px
    }
    
    .tr {
    PADDING-RIGHT: 10px; 
    PADDING-LEFT: 10px; 
    BACKGROUND: url(right.jpg) no-repeat 100% 0px; 
    PADDING-BOTTOM: 10px; 
    PADDING-TOP: 10px
    }
    the bit in bold is what i changed. Change this to alter the width of the menu.
    ----------
    Steve

  6. #5
    Junior Member
    Join Date
    Aug 2005
    Posts
    9
    Member #
    11017
    Many many thanks. Can't believe I didn't spot that ... think i got lost in my own code :squareeyed:

    Once again, my thanks.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com