/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] FireFox – bkgd color and auto-height

Copy linkTweet thisAlerts:
Sep 24.2009

Hello Gurus! I really hope someone can give me a hand. I am creating my first CSS/DIV styled site (used to build in Tables and trying to make the transition to better design) and have a couple of questions about how it displays in FireFox.

1) Background color not showing – take a look at this page: [URL=”http://www.aahahealthypet.com/inner_accred.html”]http://www.aahahealthypet.com/inner_accred.html[/URL]

If you scroll down, the background color disappears below the left column (after the blue gradient box) and below the content column (there’s a 5 pixel space). I have made sure the background color is in the styles, but I don’t know why it’s not showing up?

2) Auto-Height on Left column – on the same page, I want the blue gradient box on the left column to stretch with the length of the content area. The length is variable and can change from page to page. I have height:auto; set on the blue gradient div box, but I don’t know how to make it relevant to the content div?

Here is a link to the CSS (it’s also in the source code): [URL=”http://www.aahahealthypet.com/style/AAHAHealthyPet.css”]http://www.aahahealthypet.com/style/AAHAHealthyPet.css[/URL]

I have validated the XHTML and the CSS through W3C.

Any help/tips would be great!! I am really stuck on this and have been trying to work out these problems for a couple of days. I am aware that the layout isn’t corrent in IE, but that will be a new forum question since they are different problems. 😡

Thank you!!!!!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@hlj71authorSep 25.2009 — Hi! I'm a little surprised that there have been no responses to my post. Am I missing something in the post that is needed? Does anyone have questions? Is my description of my problem clear as mud? I figured the problems I am having were something small, but maybe it's a bigger issue?

Thanks.
Copy linkTweet thisAlerts:
@nathandelaneSep 30.2009 — Hey I just saw this -- that's looking pretty good. I just did some messing around with your outer containing divs and found something that'll probably work. First of all remove height: auto -- it is redundant as that is the default behavior for height in all browsers. Second for each of your divs that contain the main content remove the float and clear CSS attributes, you don't really need those either. Then add overflow: hidden to the three containers (I'm talking those in the main container). Also remove position: relative and the z-index attributes on the three main containers. And voile, it does what you want it to.

To recap:

1. From the classes .top, .menu, and .contentWrapper remove:

any attributes named clear, float, position, height, or z-index

2. To the classes .top, .menu, and .contentWrapper add:

overflow: hidden;

And finally in .top make your margin-bottom +5 instead of -5.

See how it looks and call me later ?
Copy linkTweet thisAlerts:
@hlj71authorOct 12.2009 — Hi nathandelane! Thank you so much for your response, that fixed my problems. I'm sorry it took me so long to respond to you, another project came up that took priority, but I am back on this one.

Do you have any ideas on how to get the blue gradient box on the bottom left to stretch with the rest of the page? The page height will be different from page to page, depeing on the amount of content added to it. I'm looking into the faux columns method, but am having a little trouble putting it together in my head at the moment with the 2 left column images and the gradients included in them. So, if you have any other ideas, I am open to them!

Again, thank you so much!! You are a life saver! ?
Copy linkTweet thisAlerts:
@hlj71authorOct 13.2009 — Hi! It turns out that we may not need the left column to have an equal length of the content area. So please disregard my previous post. For now, I am going to try and find a site review forum to have others look at the code and get some feedback.

Here is a link to the current pages: http://www.aahahealthypet.com/home_v1.aspx

The main menu links now go to what those inner pages will look like, but none of the subnavigation links work since we don't currently have content for any subnavigation yet.

I know the code in line 1 of the page throws IE into quirks mode, but it is needed for when we convert the pages into C#.

Thank you for all the help, I wouldn't have been able to gotten this far without this forum!
×

Success!

Help @hlj71 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...