14 replies [Last post]
CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

I have this working great in IE6 and IE7, but not Firefox 2.0.0.4. I can't host this site yet, but I do have some screenshots of the problems. Here are the divs I'm working with:

.container2 {
width: 770px; margin: 0 auto; text-align: center;
padding: 0; background-color: #459cd3;}

.container2 .MainContent {
background: url('/images/container2-bg.jpg') no-repeat bottom center;
width: 770px;}

Here is the screenshot for IE6 and IE7.

Here is the screenshot for Firefox.

Solution Attempt 1

If I add a height to the .container2 .MainContent string, like height: 515px, then the container2-bg.jpg image shows in Firefox, but then causes height issues when you click Submit on the application without filling out any fields.

Here is the screenshot for IE6 and IE7 with the height added.

Here is the screenshot for Firefox with the height added.

If I put height:auto or try anything else besides specifying a pixel amount, the image does not appear.

The HTML is super basic. Obviously I've got alot of other stuff going on in the page, but for the layout itself regarding this issue, it's basically this:

Solution Attempt 2

I tried moving the bg image to the .container2 div instead, but half the image "hides" underneath the footer bar, which contains the bottom half of the lady and the navy bar with the bottom navbar underneath.

Any suggestions?
Thanks..

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Could you post all your code

Could you post all your code please?

Verschwindende wrote:
  • CSS doesn't make pies

CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

Here is the code...

There's alot going on server-side wise. Please note that even though the code below shows div class="container", on the Default page (where the screenshots were taken from), it pulls the container2 code from the stylesheet. All other pages of the site use just the div "container". Here's a link to my style sheet.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="Sources_CashDirectPlus_MasterPage" %>

CashDirectPlus.com




CashDirectPlus.comCashDirectPlus.com
















Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If you can post a link to

If you can post a link to your CSS you can post a link to your page. That's what we want, why are you seemingly intent on making things hard for us?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

I really am trying not to

I really am trying not to make things hard...it's just that it's not as simple as uploading 1 HTML page. That page (the Default.aspx page) calls dozens of other files (and "code-behind) and I can't push the project up because it is not complete. I am the designer and there are other programmers involved that are still working on it. The code I copied already isn't even on the Default page, it's on a "MasterPage" file in VisualStudio.Net 2.0, which is basically like the design template for the site. I do apologize. Please let me know if you think you can work with what I've posted or if it's too complicated.

Thanks for your time...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 24 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Since the server side stuff

Since the server side stuff is not a concern, Open your page locally and view source. Use that source and the associated stylesheet(Drunk as the working copy and put it somewhere we can access.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

OK, let's see if this helps:

OK, let's see if this helps: Click here to view the page. Don't worry about the blue line that bisects the lady - that just appeared since I saved it as is. Hope this helps!!!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSSinDelray wrote:I really

CSSinDelray wrote:
I really am trying not to make things hard...it's just that it's not as simple as uploading 1 HTML page. That page (the Default.aspx page) calls dozens of other files (

I understand that, I use PHP myself but the principal is the same. What matters so far as the browser is concerned in what the browser can see, which is only the final HTML your server side scripts spit out to the web (and the CSS too, of course).

If you can't post a link to the page, which is really the best thing for all of us, you should at least give us what the browser will see as Gary has suggested above. Some of us will take the time and trouble to paste that into a local page and take a look, and some of us are smart enough to see the problems by direct code inspection and will do that. But "some of us" doesn't include me.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSSinDelray wrote:OK, let's

CSSinDelray wrote:
OK, let's see if this helps: Click here to view the page. Don't worry about the blue line that bisects the lady - that just appeared since I saved it as is. Hope this helps!!!

Well to start with you can't complain about how a browser renders what you send it unless you send it valid html or xhtml. Well you can complain, but not fairly. Browsers are just simple computer programs that can only render the code they get.

Admittedly you've got only a couple of errors, but you should fix them before you try and diagnose a problem. Seemingly minor html errors can cause the darndest effects.

Also, you have a really really bad case of DIVITIS there. That's bad coding practice and will lead you into all sorts of trouble. Content that's text belongs in a P. Headers belong in an Hx element, and menus (which are lists of anchors) belong in list elements.

And tables for layout!! This is a practice from the 1990's. Folks around here have mostly left tables behind except where they are appropriate, which is for naturally tabular information. I'm not going to wade through convuluted table code like that unless I'm paid to, and I already have a job.

So you might find it hard to get useful help around here because we're a site dedicated to proper coding practices and using CSS for layout, with semantic code and modern positioning methods.

On the other hand, maybe one of the really smart folks will take pity on you and give you some advice, you never know...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

Okay...let's back up here.

Okay...let's back up here. For the record, I am only in charge of the design elements, i.e. the design and layout of the header, footer, and graphics in between, plus font styles. I am not the developer who created the table-based application and all the extra junk he may have placed in there. I just want to know if anyone, having pity on me or not, knows how to get a background image that has been positioned bottom center to show up in Firefox. You can see this background image just fine in IE 6 and IE 7, but not Firefox. Any more or any less code doesn't matter, it's a CSS background/possible browser issue we're talking about here.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 24 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You have uncontained

You have uncontained floats.

Do:

.container2 .MainContent {
background:transparent url(container2-bg.jpg) no-repeat scroll center bottom;
overflow:hidden;
width:770px;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

Gary, You Are The Man!

Ugh, amazing. Thank you SO much.

Cheers!
Megan

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

All sorted?

All sorted?

Verschwindende wrote:
  • CSS doesn't make pies

CSSinDelray
Offline
newbie
Last seen: 13 years 16 weeks ago
Joined: 2007-06-25
Posts: 7
Points: 0

All sorted! Thanks a bunch

All sorted!

Thanks a bunch :thumbsup:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 16 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Next thing to do is get your

Next thing to do is get your markup validated and ditch those tables Wink but for now I'll mark this as solved.

Verschwindende wrote:
  • CSS doesn't make pies