css issue right in firefox wrong in IE

  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • olm75
  • Proficient
  • Proficient
  • olm75
  • Posts: 294

Post 3+ Months Ago

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. }
  • webguru
  • Born
  • Born
  • webguru
  • Posts: 3

Post 3+ Months Ago

Hello olm75,

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

Neelesh
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

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 :)

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 73 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.