4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

:( I need help with css and Inline divs... :(

by Steve Wells
3 replies
I am working on a webpage, its at Problem Web Page

Here is my problem, everything lookes fine on Firefox and IE 7 up until I added divs inside of divs..............I was trying to add borders, it looked great until I checked in firfox

IE 7 Looks great but now Firefox is all messed up and I assume other broswers also.........

Any help would be greatly appreciated........


Here is the code thats giving me the issue, do I need to code this diff for the 5 major browsers?

<center><div style="
width: 350px;
height: 120px;
margin: 10px;
padding: 6px;
border: 0px;
border-style:none;
text-align: left;
p-align: center;
overflow: auto">

<!--- Add your testimonials between here --->
<center><div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:10px; text-align: center; margin: 5px;"><p style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</p></center></div><center><div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;"><p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p></div></center><br /><!--- and here --->

<!--- Add your testimonials between here --->
<center><div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:10px; text-align: center; margin: 5px;"><p style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</p></center></div><center><div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;"><p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p></div></center><br /><!--- and here --->

<!--- Add your testimonials between here --->
<center><div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:10px; text-align: center; margin: 5px;"><p style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</p></center></div><center><div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;"><p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p></div></center><br /><!--- and here --->

<!--- Add your testimonials between here --->
<center><div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:10px; text-align: center; margin: 5px;"><p style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</p></center></div><center><div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;"><p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p></div></center><br /><!--- and here --->

<!--- Add your testimonials between here --->
<center><div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:10px; text-align: center; margin: 5px;"><p style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</p></center></div><center><div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;"><p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p></div></center><br /><!--- and here --->

</div></center>
#css #divs #inline
  • Profile picture of the author Bruce Hearder
    Does this do what you want ..

    <div style="
    width: 350px;
    margin: auto;
    padding: 6px;
    border: 0px;
    border-style:none;
    text-align: left;
    p-align: center;
    overflow: auto">
    <!--- Add your testimonials between here --->
    <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
    <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
    </div>
    <center>
    <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
    <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font><br />
    <!--- and here --->
    <!--- Add your testimonials between here --->
    </p>
    </div>
    </center>
    <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
    <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
    </div>
    <center>
    <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
    <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
    </div>
    </center>
    <br />
    <!--- and here --->
    <!--- Add your testimonials between here --->
    <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
    <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
    </div>
    <center>
    <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
    <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
    </div>
    </center>
    <br />
    <!--- and here --->
    <!--- Add your testimonials between here --->
    <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
    <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
    </div>
    <center>
    <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
    <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
    </div>
    </center>
    <br />
    <!--- and here --->
    <!--- Add your testimonials between here --->
    <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
    <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
    </div>
    <center>
    <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
    <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
    </div>
    </center>
    <br />
    <!--- and here --->
    </div>

    Hope this helps

    Bruce
    {{ DiscussionBoard.errors[1835171].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by Bruce Hearder View Post

      Does this do what you want ..

      <div style="
      width: 350px;
      margin: auto;
      padding: 6px;
      border: 0px;
      border-style:none;
      text-align: left;
      p-align: center;
      overflow: auto">
      <!--- Add your testimonials between here --->
      <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
      <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
      </div>
      <center>
      <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
      <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font><br />
      <!--- and here --->
      <!--- Add your testimonials between here --->
      </p>
      </div>
      </center>
      <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
      <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
      </div>
      <center>
      <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
      <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
      </div>
      </center>
      <br />
      <!--- and here --->
      <!--- Add your testimonials between here --->
      <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
      <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
      </div>
      <center>
      <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
      <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
      </div>
      </center>
      <br />
      <!--- and here --->
      <!--- Add your testimonials between here --->
      <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
      <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
      </div>
      <center>
      <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
      <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
      </div>
      </center>
      <br />
      <!--- and here --->
      <!--- Add your testimonials between here --->
      <div style="display: block; background: #ffffff; border: 1px solid #000000; width: 310px; height:20px; text-align: center; margin: 5px;">
      <span style="background: #267ee0; color: white;">Rick Henderson, Oak Grove, Missouri</span>
      </div>
      <center>
      <div style="display: block; background: #ffffff; border: 1px solid #000000; padding: 5px 5px 5px 5px; width: 310px; height:80px; text-align: left;">
      <p style="text-indent : 1em"><font size="2">I have made over $1,000 dollars each month for the past 5 months and have only been involved with MLM marketing for 7 months total, WOW! Don't pass this up, you won't regret it... I PROMISE...</font></p>
      </div>
      </center>
      <br />
      <!--- and here --->
      </div>

      Hope this helps

      Bruce
      Thats close, but I am trying to get it to look like the image I have inserted here below. with a scroll bar and the header color to span the entire top, this is exactly how it looks in IE, ..... The window should show one tetimonial at a time and the ability to scroll down to see more....

      The code I have inserted in the starting post creates this below....

      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[1835809].message }}
  • Profile picture of the author Bruce Hearder
    Ok..

    Just change the top div style to this :

    <div style="
    width: 350px;
    height: 123px;
    margin: auto;
    padding: 6px;
    border: 0px;
    border-style:none;
    text-align: left;
    p-align: center;
    overflow: auto">


    Hope this helps

    Bruce
    {{ DiscussionBoard.errors[1837240].message }}

Trending Topics