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 9 of 9
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts

    Arrow Need help fixing CSS.

    Hi gang:

    I need a little help fixing the CSS on the following page: http://www.mediamogulsweb.com/Demo_Site/index.php.

    Let me list my grievances:

    In Firefox --

    1) I need to get rid of the black space at the very top and very bottom of the page.

    2) I need to get the 1px, solid, black border to appear above my "bottom-of-the-page" links menu bar (It shows up in IE).

    In IE --

    1) I need to make the "Customized Computing Solutions" header look like it does in Firefox.

    In both Firefox & IE --

    1) I need the div, that contains the descriptions of our different computer hardware offerings, to extend all the way down to the "bottom-of-the-page" links menu bar

    2) I need to vertically align the copyright and admin sign-in at the bottom of the page, so that they are even and look the same in both Firefox & IE.

    Thanks for any help.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    In Firefox:

    1) I don't see the top black space, but the bottom one is caused by the default margins of the <p> tag in your floating divs. Set the margins to 0 and it'll go away (but see Both Browsers #2 at the bottom).

    2) Remove "border-bottom:1px solid #2C2C2C;" from page_content_container add "border-top: 1px solid #2C2C2C;" to footer_top

    In Internet Explorer:

    1) The spacing issue is cause by the default <h2> margin. Set them to 0 and they'll look the same.

    Both Browsers:

    1) Add "background-color:#FFFFFF;" to page_container

    2) You'll have to play with margin since you changed the margins of the <p> tag.
    Pepe, the bull

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Thanks for the help!

    Everything works great now except for two things:

    1) I need to get the top navigation links in IE to be flush with the bottom of #top_div (it looks right in Firefox).

    2) I need the shadow that runs along the left side of #main_window to continue down vertically to the bottom of the div.

    I really appreciate your help...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chump2877
    2) I need the shadow that runs along the left side of #main_window to continue down vertically to the bottom of the div.
    There's no other way then setting a background image on the parent of the content container instead. AFAIK that's page_content_container
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    There's no other way then setting a background image on the parent of the content container instead. AFAIK that's page_content_container
    Thanks, that's what I thought actually...but I wanted to be sure....

    How about #1, any ideas?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #6
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I downloaded your page to test some things so I didn't see the shadow on the upper part either. Sorry about that. In regards to #1.

    Code:
    #top_div {
    	PADDING-RIGHT: 5px; MARGIN-TOP: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BORDER-BOTTOM: #2c2c2c 1px solid; HEIGHT: 65px; BACKGROUND-COLOR: #5b9ecb; TEXT-ALIGN: right
    }
    needs to become

    Code:
    #top_div {
    	PADDING-RIGHT: 5px; MARGIN-TOP: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 5px; BORDER-BOTTOM: #2c2c2c 1px solid; HEIGHT: 65px; BACKGROUND-COLOR: #5b9ecb; TEXT-ALIGN: right
    }
    html>body #top_div {
    	PADDING-BOTTOM: 5px;
    }
    This is the only way I know how to do it. It will make IE and FF have two different values for bottom padding.
    Last edited by Pepe, the bull; 07-11-2005 at 04:13 PM.
    Pepe, the bull

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Very nice...thanks you.

    In regards to this code:


    Code:
    #top_div {
    	PADDING-RIGHT: 5px; MARGIN-TOP: 0px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 5px; BORDER-BOTTOM: #2c2c2c 1px solid; HEIGHT: 65px; BACKGROUND-COLOR: #5b9ecb; TEXT-ALIGN: right
    }
    html>body #top_div {
    	PADDING-BOTTOM: 5px;
    }
    This is a CSS hack of some sort, right?

    So html>body in front of the div id allows you specify properties/values that will only be affected in IE, right?

    Just want to make sure, because up until now I've been serving different style sheets if I had to, and I'd like to be able to by-pass that strategy by using this hack instead....assuming that this hack works for ALL CSS properties/values, in every circumstance?

    thanks again.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #8
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    This is what I understand of the topic. I just started using this.

    html>body is a parent>child mark which is not supported by IE, so it ignores it thus making it able for you to use it to change an element for Mozilla browsers.

    You will notice that the following code is for IE:
    Code:
    #top_div {
    	PADDING-RIGHT: 5px;
    	MARGIN-TOP: 0px;
    	PADDING-LEFT: 5px;
    	PADDING-BOTTOM: 2px;(you had 5px here, which caused a 3px space)
    	PADDING-TOP: 5px;
    	BORDER-BOTTOM: #2c2c2c 1px solid;
    	HEIGHT: 65px; 
    	BACKGROUND-COLOR: #5b9ecb;
    	TEXT-ALIGN: right
    }
    ...and that this is the fix for FF:
    Code:
    html>body #top_div {
    	PADDING-BOTTOM: 5px; (which is what made it look right the first time.)
    }
    Pepe, the bull

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Sweeeet....so I had it switched around....

    Thanks for the info, bud....I'm gonna start using that hack.....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


  •  

    Posting Permissions

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