18 replies [Last post]
Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I'm building a website and have a content div inside the body with a grey border:

http://img399.imageshack.us/img399/4198/problemdisplaylh4.jpg

As you can see, it displays perfectly fine in firefox.

But in internet explorer...

http://img122.imageshack.us/img122/4030/ieproblemhk6.jpg

Heres the code for the #content div

#content {
border: 4px solid grey;
width: 90%;
height: 500px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

Heres the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div id="content">
</body>
</html>

Not including the menu, but it's irrelevant.

Triumph (not verified)
Anonymous's picture
Guru

What happens when you run

What happens when you run that markup through the validator?

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Well i can't because the

Well i can't because the code is not online yet

Triumph (not verified)
Anonymous's picture
Guru

Strange_Paint wrote:Well i

Strange_Paint wrote:

Well i can't because the code is not online yet

Ever try clicking on those tabs on top of the validator? Smile

Here: http://validator.w3.org/#validate_by_input

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

<b>This document was

Smile

This document was successfully checked as HTML 4.01 Strict!

Triumph (not verified)
Anonymous's picture
Guru

Strange_Paint wrote:

Strange_Paint wrote:

Heres the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div id="content">
</body>
</html>

Not including the menu, but it's irrelevant.

Strange_Paint wrote:

Smile

This document was successfully checked as HTML 4.01 Strict!

BS! What you posted up above doesn't validate.

Look, man. Just post your code. All of it. Not snippets. Nothing is irrelevant. I'll bet that the menu is the entire issue. Let me guess because that's all I can do, the menu is floated and not contained. IE gets it wrong.

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Ok i will post all the code

Ok i will post all the code Smile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="web.css">
</head>
<body>
<div id="content">
<ul class="solidblockmenu">
<li><a href="index.htm" class="current">Home</a></li>
<li><a href="Donate.htm">Donate</a></li>
<li><a href="Forums.php">Forums</a></li>
<li><a href="Tools.htm">Tools</a></li>
</ul>
<br style="clear: left"></div>
</body>
</html>

#content {
border: 4px solid grey;
width: 90%;
height: 500px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
 
 
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}
 
.solidblockmenu li{
display: inline;
}
 
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
 
.solidblockmenu li a:visited{
color: white;
}
 
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(blockactive.gif) center center repeat-x;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Lets step back a bit and

Lets step back a bit and repeat the validation? Validate that complete markup document and fix the glaring error which Triumph has already alluded to, then your code will work as expected.

It's not a containment issue in this instance. your container has hasLayout triggered so will contain the floated children, modern browsers don't have a containment fix but the fixed height is masking that fact.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

When i said i validated, i

When i said i validated, i mean't all my code..Like what i posted there + my meta description, keywords, and title.

I don't quite understand the glare issue you speak of, and i don't know how to validate CSS.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

if you did indeed validate

if you did indeed validate the markup then the validator would have described the error. CSS validation is not the issue here.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Actually I owe you a slight

Actually I owe you a slight apology, the glaring error I perceived was due to the fact that I missed the closing div nestled after the br tag (not the best formatting approach)there was a an error though which you should have corrected in the missing title tag, but this does not cause the rendering issue; what however does cause a problem is the keyword grey as clearly FF will accept 'grey' or 'gray' IE doesn't and requires the American spelling!!! :curse: 'gray'

Again apologies for being tough on you as that took me a few minutes to puzzle out

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Yep, 'gray' fixed the issue

Yep, 'gray' fixed the issue Smile thanks. I never knew gray was ever spelt differently than grey. I also have to spell 'colour' as 'color' so yeah Smile

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Okay well i have another

Okay well i have another problem. I want to get a logo in the middle of the #content div, but a bit closer to the top than to the bottom. Everytime i try to do this it appears outside the #content div, i have no idea why?

.logo {
margin-top: 220px;
background: url(blahblah.png);
border: 2px solid black;
padding: 2px;
height: BLAH BLAHpx;
width: BLAH BLAHpx;

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If the parent of that logo

If the parent of that logo has a fixed height then adding that much top margin will likely push the logo down and to the point where it overflows it's parents boundaries, you might want to change the fixed height (if that is the issue) to min-height and feed IE6 a separated filtered rule so that it sees fixed height as original (IE will expand a fixed height - incorrectly!)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Triumph (not verified)
Anonymous's picture
Guru

Hugo, thanks for picking up

Hugo, thanks for picking up for me while I regenerated in my hypercube.

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Ok how do i feed a

Ok how do i feed a sepereated filter rule or whatever lol? And i changed height to min-height and the problem still exists.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

show us code or better still

show us code or better still the page uploaded to a server accessible online would be best.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Strange_Paint
Offline
Regular
Last seen: 11 years 15 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

That would be too hard. And

That would be too hard. And i already did post all the code. Anyway i got rid of it by taking away a that had a style of clear: left;

Cheers.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Ok how do i feed a

Quote:

Ok how do i feed a sepereated filter rule or whatever lol?

You'll run into many times when you need to do this:

#somebox {
min-height: 666px;
}
* html #somebox {
height: 666px;
}

For IE6, height means "minimum height" due to expanding-box bug (I think). So that's how you feed it: use the star hack.

I'm no expert, but I fake one on teh Internets