Back To Website Design Forum

css issue right in firefox wrong in IE

  • olm75
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Aug 07, 2005
  • Posts: 294
  • Status: Offline

Post January 8th, 2008, 2:21 am

i have a site im building the ul Li #sideMenu is right in firefox but when i go to IE it has move to th right about 100 px... is there a bug fix or am i just messing up kidda new to this css div world... thanks...
the site name is: http://nightspotz.com/Zippfinder/zippfinder.php
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 8th, 2008, 2:21 am

  • olm75
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Aug 07, 2005
  • Posts: 294
  • Status: Offline

Post January 8th, 2008, 2:26 am

here is the css code:
Code: [ Select ]
#buyProperty {
    background-image: url(/Zippfinder/images/buyPropertyBox.png);
    background-repeat: no-repeat;
    background-position: top;
    float: right;
    height: 133px;
    width: 190px;
    margin-top: 10px;
    margin-right: -1px;
}
#addProperty {
    background-image: url(/Zippfinder/images/addPropertyBox.png);
    background-repeat: no-repeat;
    background-position: top;
    float: right;
    height: 133px;
    width: 188px;
    margin-top: 10px;
    margin-right: -2px;
}
#advertiseServices {
    background-image: url(/Zippfinder/images/advertiseBox.png);
    background-repeat: no-repeat;
    background-position: top;
    float: right;
    height: 133px;
    width: 192px;
    margin-top: 10px;
}
#outerWrapper #contentWrapper {
    height: 440px;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
    margin: 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
    padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
    height: 440px;
}
#login {
    float: left;
    height: 133px;
    width: 180px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-image: url(/Zippfinder/images/loginBox.png);
    background-repeat: no-repeat;
    background-position: left top;
}
#outerWrapper #footer {
 height: 40px;
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#becomeInvestor {
    background-image: url(/Zippfinder/images/becomeInvestorBox.png);
    background-repeat: no-repeat;
    background-position: top;
    height: 95px;
    width: 374px;
    margin-top: 15px;
    float: right;
    clear: right;
}
#loanApp {
    background-image: url(/Zippfinder/images/loanAppBox.png);
    background-repeat: no-repeat;
    height: 95px;
    width: 374px;
    float: right;
    margin-top: 15px;
    background-position: top;
    clear: both;
}
#sideMenu {
    position: absolute;
    margin-top: 160px;
    width: 215px;
    margin-left: -15px;
    float: right;
    clear: both;
}
#sideMenu li {
    color: #FF8216;
    font-weight: normal;
    font-size: 14px;
    list-style-type: circle;
    font-style: normal;
    list-style-position: outside;
}
#sideMenuHeader {
    height: 20px;
    font-size: 15px;
    font-weight: bold;
    padding-left: 25px;
    line-height: 30px;
}
  1. #buyProperty {
  2.     background-image: url(/Zippfinder/images/buyPropertyBox.png);
  3.     background-repeat: no-repeat;
  4.     background-position: top;
  5.     float: right;
  6.     height: 133px;
  7.     width: 190px;
  8.     margin-top: 10px;
  9.     margin-right: -1px;
  10. }
  11. #addProperty {
  12.     background-image: url(/Zippfinder/images/addPropertyBox.png);
  13.     background-repeat: no-repeat;
  14.     background-position: top;
  15.     float: right;
  16.     height: 133px;
  17.     width: 188px;
  18.     margin-top: 10px;
  19.     margin-right: -2px;
  20. }
  21. #advertiseServices {
  22.     background-image: url(/Zippfinder/images/advertiseBox.png);
  23.     background-repeat: no-repeat;
  24.     background-position: top;
  25.     float: right;
  26.     height: 133px;
  27.     width: 192px;
  28.     margin-top: 10px;
  29. }
  30. #outerWrapper #contentWrapper {
  31.     height: 440px;
  32. }
  33. /* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
  34. #outerWrapper #contentWrapper #content {
  35.     margin: 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  36.     padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  37.     height: 440px;
  38. }
  39. #login {
  40.     float: left;
  41.     height: 133px;
  42.     width: 180px;
  43.     margin-top: 10px;
  44.     margin-right: 0px;
  45.     margin-bottom: 0px;
  46.     margin-left: 0px;
  47.     background-image: url(/Zippfinder/images/loginBox.png);
  48.     background-repeat: no-repeat;
  49.     background-position: left top;
  50. }
  51. #outerWrapper #footer {
  52.  height: 40px;
  53.  padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  54. }
  55. #becomeInvestor {
  56.     background-image: url(/Zippfinder/images/becomeInvestorBox.png);
  57.     background-repeat: no-repeat;
  58.     background-position: top;
  59.     height: 95px;
  60.     width: 374px;
  61.     margin-top: 15px;
  62.     float: right;
  63.     clear: right;
  64. }
  65. #loanApp {
  66.     background-image: url(/Zippfinder/images/loanAppBox.png);
  67.     background-repeat: no-repeat;
  68.     height: 95px;
  69.     width: 374px;
  70.     float: right;
  71.     margin-top: 15px;
  72.     background-position: top;
  73.     clear: both;
  74. }
  75. #sideMenu {
  76.     position: absolute;
  77.     margin-top: 160px;
  78.     width: 215px;
  79.     margin-left: -15px;
  80.     float: right;
  81.     clear: both;
  82. }
  83. #sideMenu li {
  84.     color: #FF8216;
  85.     font-weight: normal;
  86.     font-size: 14px;
  87.     list-style-type: circle;
  88.     font-style: normal;
  89.     list-style-position: outside;
  90. }
  91. #sideMenuHeader {
  92.     height: 20px;
  93.     font-size: 15px;
  94.     font-weight: bold;
  95.     padding-left: 25px;
  96.     line-height: 30px;
  97. }
  • Neelesh
  • Born
  • Born
  • No Avatar
  • Joined: Jan 08, 2008
  • Posts: 3
  • Status: Offline

Post January 8th, 2008, 4:20 am

Hello olm75,

You will have to create two different CSS code, one for IE and another for Firefox.

Neelesh
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Joined: Dec 04, 2007
  • Posts: 659
  • Loc: USA
  • Status: Offline

Post January 8th, 2008, 5:43 am

Neelesh wrote:
Hello olm75,

You will have to create two different CSS code, one for IE and another for Firefox.

Neelesh


You should only need one CSS file for the layout it just takes tinkering ... I am learning the whole CSS Div design aswell so don't feel bad 8)

Not being an expert ... at first glance I would modify this code around to see If I could make it work :


margin-left: -15px;
float: right;
clear: both;

I will investigate after work :)

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.