[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

CSS New Line Problem in Firefox

Hi Experts;

I'm a bit new in CSS but I'm trying to learn. Anyhow I'm experiencing a tough problem for me ;).

The problem is like this if I decrease the screensize of firefox like 1/4 of my screen the
page body highlight (#body-glow in CSS) doesnt seem to extend to the buttom of the page.
The problem happens if I add a new <p> or <br> to my page.

See Site Ver3: http://www.jmsoan.com/web3/
See My CSS: http://www.jmsoan.com/web3/design.css

Note1: The #body-glow is the glowing blue part on the page.
Note2: The problem only happens in Firefox but not in IE.

Thanks: Javatm
0
Javatm
Asked:
Javatm
  • 12
  • 10
  • 3
  • +2
1 Solution
 
BobsReCommented:
Works fine in my firefox.
0
 
BobsReCommented:
You do have some css and HTML errors though that I would check out.
0
 
JavatmAuthor Commented:
Here's the image of the problem : http://www.jmsoan.com/web3/Problem.jpg
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
radnorCommented:
OK, well the flash menu on th old site.....   Are you using the TEXT as the HIT AREA for the buttons???  It looks like you are..

As far as the new, I do not get the resize problems either.
0
 
radnorCommented:
I think the problem is (WAS) you did NOT have the scroll bar at the TOP of the page when you did a resize.  I pulled the scroll bar to the bottom and then did a resize and duplicated the problem.
0
 
JavatmAuthor Commented:
> OK, well the flash menu on th old site.....   Are you using the TEXT as the HIT AREA > for the buttons???  It looks like you are..

Yes :D

> As far as the new, I do not get the resize problems either.

So what do you think is the problem? I'm using the latest stable 1.5.0.3
0
 
JavatmAuthor Commented:
> I think the problem is (WAS) you did NOT have the scroll bar at the TOP

It seems on the top : http://www.jmsoan.com/web3/design.css
0
 
BobsReCommented:
I see the proplem now.  I misunderstood the original question.  The problem is with the body-upper div.  You have it set to relative but not properly telling it where to go
0
 
JavatmAuthor Commented:
> You have it set to relative but not properly telling it where to go

Is this not enough ?

#body-upper {
      position:relative;
      margin-left:auto;
      margin-right:auto;
      width:640px;
      height:400;
      z-index:auto;
      background-color: #000000;
      color:#FFFFFF;
}
0
 
BobsReCommented:
Add Top: -100% to the body-upper div.  That should get you started.
0
 
BobsReCommented:
Of course IE will have issues with that so add this to your HTML

<!--[if IE]>
<style type='text/css' media='all'>

#body-upper,
#body-lower { {
      Top: 0;
}

</style>
<![endif]-->

After adding Top: -100% to the upper and lower divs in the css file.
0
 
JavatmAuthor Commented:
> Add Top: -100% to the body-upper div.  That should get you started.

I playes with it just now and it doesnt seem to work? it just removed the whole div.
0
 
BobsReCommented:
Hmm..  I just copied your html and CSS, made the changes and it looked like it worked. Take a look at http://www.boundlesswebhosting.com/T.php.  (I did not upload the images.
0
 
JavatmAuthor Commented:
There's a flash file with it I guess thats why it doesnt work, #banner is the flash.
0
 
BobsReCommented:
Ok, I have flash disabled on my browser so I did not see that.  You should be able to do the same thing that you did to the upper and lower divs to the banner div.
0
 
JavatmAuthor Commented:
with top:-100% all disappeared :( except it shows the last div.
0
 
BobsReCommented:
All disappeared in firefox or IE?  did you add the Top: 0; for IE:
#banner,
#body-upper,
#body-lower { {
     Top: 0;
}
0
 
JavatmAuthor Commented:
I guess this is the only problem :

#body-glow {
      position:relative;
      margin-left:auto;
      margin-right:auto;
      width:800px;
      height:100%;
      z-index:auto;
      background-image:url(Table.png);
}

Because it doesn't seem to extend at the bottom of the page?
0
 
BobsReCommented:
Do you have a screenshot of that.  It is extending to the bottom of the page for me.
0
 
JavatmAuthor Commented:
Here's basically what I'm doing :

1. Create a div that will extend at the bottom of the page w/ a glowing body highlight.
    for it to extend I tried this :

#body-glow {
     position:relative;
     margin-left:auto;
     margin-right:auto;
     width:800px;
     height:100%;
     z-index:auto;
     background-image:url(Table.png);
}

also at the body I added :

body, html {
      height: 100%;
      padding: 0px;
      margin: 0px;
      scrollbar-face-color: #315594;
      scrollbar-highlight-color: #315594;
      scrollbar-shadow-color: #FFFFFF;
      scrollbar-3dlight-color: #FFFFFF;
      scrollbar-arrow-color:  #FFFFFF;
      scrollbar-track-color: #B4C0D8;
      scrollbar-darkshadow-color: #666666;
}

However it doesn't seem to extend to the bottom when I resize firefox to 1/4 of my screen?
0
 
JavatmAuthor Commented:
Ok I was able to fix it my just using:

#body-glow {
      position:relative;
      margin-left:auto;
      margin-right:auto;
      width:800px;
      min-height:100%;
       z-index:auto;
      background-image:url(Table.png);
}

However it doesnt work in IE the glow part now doesn't extend to the bottom in IE
any work arounds?
0
 
JavatmAuthor Commented:
I dont want to use any if IE I want pure CSS thanks.
0
 
BobsReCommented:
Well, as I said before It works just as you described for me.  Without being able to duplicate the problem, I don't think I can be of more assistence.
  Bobby
0
 
nltechCommented:
awk. it's a windows server...

against my better judgement, i went there anyway....

HTTP/1.x 500 Internal Server Error

Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
MicrosoftOfficeWebServer: 5.0_Pub


get a real server and then i'll try again. please see www.debian.org for a fix.


;)
0
 
nltechCommented:
woops. wrong window. sorry boys. ;)
0
 
nltechCommented:
heh. not the first time i've done that.. oh, well...


regarding: http://www.jmsoan.com/web3/

in *my* firefox, i can't see the header flash (the player at the bottom does, though), but everything else looks fine.
0
 
JavatmAuthor Commented:
Ok I'm done fixing it using an IE hack plus see my solution at :
http://jmsoan.com/web3/design.css

#Internet Explorer#
#body-glow {
      position:relative;
      margin-left:auto;
      margin-right:auto;
      width:800px;
      height:100%;
       z-index:auto;
      background-image:url(Table.png);
}

#Mozilla-Firefox#
#body-glow {
      position:relative;
      margin-left:auto;
      margin-right:auto;
      width:800px;
      min-height:100%;
      padding-bottom:0%;
       z-index:auto;
      background-image:url(Table.png);
}
0
 
GranModCommented:
PAQed with points refunded (500)

GranMod
Community Support Moderator
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 12
  • 10
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now