...

View Full Version : Need help fixing CSS.



chump2877
07-10-2005, 01:44 PM
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.

Pepe, the bull
07-11-2005, 05:55 AM
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.

chump2877
07-11-2005, 08:04 AM
Thanks for the help! :thumbsup:

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...

mrruben5
07-11-2005, 09:42 AM
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

chump2877
07-11-2005, 09:48 AM
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?

Pepe, the bull
07-11-2005, 04:04 PM
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.



#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



#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.

chump2877
07-11-2005, 07:13 PM
Very nice...thanks you.

In regards to this 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.

Pepe, the bull
07-11-2005, 09:06 PM
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:

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


html>body #top_div {
PADDING-BOTTOM: 5px; (which is what made it look right the first time.)
}

chump2877
07-12-2005, 02:16 AM
Sweeeet....so I had it switched around....

Thanks for the info, bud....I'm gonna start using that hack.....:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum