IE/ Firefox CSS Border Problem

S

smokeyd

Hi All,

I am new to this group but hoping that you may be able to help me. I
have built a site using divs and css that works fine in I.E. but is
having probelms is Firefox. The site is currently live at:
http://www.umbroplc.com/standard_1.aspx?id=6:108 In IE everything
displays fine however in Firefox the border cuts off halfway down the
page. I would be grateful of any help that you may be able to give
me..

Many thanks, the code is below:

///////////////////////////////html page:

<div id="global">
<div id="header">
<div id="headertitle">
</div>
<div id="navbar">
</div>
</div>
<div id="mainbody">
<div id="sidenav">
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footerleft">
</div>
<div id="footerright">
</div>/
</div>
</div>

///////////////////////////////// CSS

body {
text-align:center;
}
#global {
width:720px;
border:1px solid #165B9F;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
height: 100%;
}
#header {
}
#headertitle{
text-align:left;
padding: 5px;
}
#mainbody {
height:100%;
padding-top:0px;
padding-left:0px;
padding-right:0px;
margin-top:0px;
width:720px;
}
#sidenav {
width:200px;
text-align:left;
padding: 5px;
float:left;
clear:right;
margin:0px;
margin-top:20px;
}

#content {
text-align:left;
padding: 5px;
float:right;
width:500px;
margin:0px;
margin-top:20px;
}
#footer {
text-align:left;
padding: 0px;
width:720px;
border-top: 1px solid #165B9F;
}
#footerright {
width:250px;
text-align:right;
padding: 20px;
float:right;
margin-top:-7px;
margin-right:30px;
}
#footerleft {
width:250px;
text-align:left;
padding: 20px;
float:left;
margin-top:0px;
margin-left:30px;
}
 
B

Beauregard T. Shagnasty

smokeyd said:
I am new to this group but hoping that you may be able to help me. I
have built a site using divs and css that works fine in I.E. but is
having probelms is Firefox. The site is currently live at:
http://www.umbroplc.com/standard_1.aspx?id=6:108 In IE everything
displays fine however in Firefox the border cuts off halfway down the
page. I would be grateful of any help that you may be able to give
me..

Please fix all the errors and try again. You could probably start by
changing from a Transitional doctype to Strict.

http://www.w3.org/QA/2002/04/valid-dtd-list.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<http://validator.w3.org/check?verbose=1&uri=http://www.umbroplc.com/standard_1.aspx?id=6:108>

<http://jigsaw.w3.org/css-validator/...p://www.umbroplc.com/standard_1.aspx?id=6:108>
 
T

Thomas Jollans

smokeyd said:
width:720px;
don't use pixels. use pt or %. there are different scren resolutions.
height:100%;
that shouldn't be needed. Firefox displays it with 100% of the window,
which seams correct.

all just pure guesswork.
 
J

Jonathan N. Little

Thomas said:
don't use pixels. use pt or %. there are different scren resolutions.


that shouldn't be needed. Firefox displays it with 100% of the window,
which seams correct.

No block level elements are 'auto' by default so would not expand by
default to 100% of the window or containing element but just large
enough to contain child elements + their margins and borders + the
element;s padding. If you want otherwise then you have to specify the
height.
 
B

bluparadox

Unfortunately height: 100%; probably wont do what he wants it to in
anything but internet explorer because of how the standard is defined
for content that is larger than the specified size.

If the content takes more space than is aloted then the "overflow"
property becomes important. The 4 allowed values are "hidden",
"visible", "scroll", and "auto". "hidden" completely hides content that
falls outside of the container, "visible" lets the content continue to
go outside the container. "scroll" puts in scrollbars to allow all the
content to be viewed in the container, and I beleive "auto" puts the
scrollbars in only when neccessary.

The important thing to notice is that according to the specification
none of those properties resize the container to fit the content, which
is what IE does when you specify height. The correct functionallity
(that is implemented by firefox) is to just let the content go off the
edge of the container (when overflow is "visible"), which which is what
is happening here. The functionality he wants is probably more like the
"min-height" property, but unfortunately IE doesnt support that, and
plenty of other browsers do not either. I believe you can make it work
with some css hacks, but it's sorta a pain.

the hacked code would look something like this (havent really tried
it):

#mainbody
{
min-height: 100%
}
* html #mainbody
{
height: 100%;
}

Basically this sets the min-height to 100% for all browsers that
support min-height, and for all versions of IE sets the height to 100%,
which IE treats as min-height. The reason the second statement only
affects only IE is the fact that IE is the only browser with an
invisible wrapper element that encloses html (another non-compliant...
feature). This wont work in all browsers, since browsers that do not
support min-height but are not IE will have height set as auto still,
but this is a reasonable default since the border should then expand
fit the content, but unfortunately will not also expand to fill the
screen if the content is smaller than the screen.

Hopefully that at least gets you started in the right direction
 
S

smokeyd

Thanks for the help. I have modified the style sheet so that it now
validates. I also changed the doctype which has caused the page now to
display very different in Firefox, it currently has no border at all.
Any more help would be much appreciated..

Thanks
 
M

Marc

smokeyd said:
Thanks for the help. I have modified the style sheet so that it now
validates. I also changed the doctype which has caused the page now to
display very different in Firefox, it currently has no border at all.
Any more help would be much appreciated..

That's one step, the CSS now validates, now fix your invalid HTML - you
have 12 errors.

Marc
 
A

Adam Pflug

The problem is (I think) that you have all your content within floats,
which takes those divs out of the normal layout of the page. Because of
this they arent making the global div expand. You can fix this by
putting the following code after
your footer div:

<div style="clear: both;"></div>
 
S

smokeyd

Thanks for that Marc, however the site is a hybrid of a content
management system and my templates. The invalid code is produced by
the content management system which I have no control over.

Thanks everyone for all of your help, I am not going to rest until I
get this fixed..
 
M

Marc

smokeyd said:
Thanks for that Marc, however the site is a hybrid of a content
management system and my templates. The invalid code is produced by
the content management system which I have no control over.

You have no control of the HTML the CMS outputs? Can't you just edit
the ASP files?

Marc
 
S

smokeyd

Unfortunatley not, I can only really edit styles.. the problems that
the validator is highlighting are out of my control. I have been
playing with the styles all day and still no joy...
 
M

Marc

smokeyd said:
Unfortunatley not, I can only really edit styles.. the problems that
the validator is highlighting are out of my control. I have been
playing with the styles all day and still no joy...

Sounds like a pretty crappy CMS to me - the HTML it is outputting isn't
even close to valid - the errors are just stupid.

Marc
 
M

Marc

smokeyd said:
Anyway, still no joy with the border so any help would still be much
appreciated..

I suggest you either modify the ASP scripts, or go back to the CMS
provider, as their HTML is crap.

Marc
 
Joined
May 4, 2009
Messages
1
Reaction score
0
I think i figured this one out for you!

I ran into the same problem tonight.

just set the display attribute to "table" i.e.

.style {

display: table;

}

also I have fixed many a problem with firefox by setting the display attribute to "display" as well

hope this helps
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top